我正在使用 jQuery 在页面上显示/隐藏 div。在每个 div 中，我都有一个 jQuery 幻灯片。第一个有效，但在单击下一个 div 时， slider 已损坏。 (参见:http://www.parker-gibson.com/mqm_test/hawkeye_beef.html)。我被告知我需要在每次显示/隐藏事件后重新加载 slider ，但我不知道如何。不是很懂 jQuery。感谢您的帮助!!
代码:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Midwest Quality Meats</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="top-nav">
<nav>
<ul>
<li><a href="#">Partners</a>
<ul>
<li><a href="hawkeye.html">Hawkeye Meats</a></li>
<!--<li><a href="#">...</a></li>-->
<!--<li><a href="#">...</a></li>-->
</ul>
</li>
<li><a href="#">Meats</a>
<ul>
<li><a href="beef.html">Beef</a></li>
<li><a href="pork.html">Pork</a></li>
<li><a href="chicken.html">Chicken</a></li>
</ul>
</li>
<a href="index.html" style="display:block; float:left; margin:0 95px 0 25px;"><img src="img/ribbon.png"></a>
<li><a href="#">About Us</a></li>
<li style="margin-right:15px;"><a href="#">Contact</a></li>
</ul>
</nav>
</div> <!--end top nav-->
<div style="clear:both;"></div>
<div id="nav spacer" style="width:960px; height:80px;">
</div>
<div id="meat-wrap">
<div id="cuts-container">
<div id="hwk-beef-nav-top">
</div>
<div id="cuts">
<ul>
<li><a id="strip_btn" class="buttons"><h2>New York Strip Steak</h2></a></li>
<li><a id="tbone_btn" class="buttons"><h2>T-Bone Steak</h2></a></li>
<li><a id="sirloin_btn" class="buttons"><h2>Top Sirloin Steak</h2></a></li>
<li><a id="filet_btn" class="buttons"><h2>Sirloin Filet Steak</h2></a></li>
<li><a id="chuck_btn" class="buttons"><h2>Chuck Steak</h2></a></li>
<li><a id="beefpatty_btn" class="buttons"><h2>Ground Beef Patty</h2></a></li>
</ul>
</div>
<div id="animal-nav">
<a href="pork.html"><div id="pork-nav" style="border-right:1px solid #000;"></div></a>
<a href="chicken.html"><div id="chicken-nav"></div></a>
</div>
</div>
<!---------------------new york strip------------------------->
<div id="strip">
<div id="cut-slider">
<ul id="slider1" class="sliders">
<li><img src="img/slider-img/strip1.jpg" /></li>
<li><img src="img/slider-img/strip-box.jpg" /></li>
<li><img src="img/slider-img/strip2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">New York Strip Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end strip-->
<!---------------------t-bone------------------------->
<div id="tbone">
<div id="cut-slider">
<ul id="slider2" class="sliders">
<li><img src="img/slider-img/tbone1.jpg" /></li>
<li><img src="img/slider-img/tbone-box.jpg" /></li>
<li><img src="img/slider-img/tbone2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">T-Bone Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end tbone-->
<!---------------------sirloin------------------------->
<div id="sirloin">
<div id="cut-slider">
<ul id="slider3" class="sliders">
<li><img src="img/slider-img/sirloin1.jpg" /></li>
<li><img src="img/slider-img/sirloin-box.jpg" /></li>
<li><img src="img/slider-img/sirloin2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Top Sirloin Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end sirloin-->
<!---------------------filet------------------------->
<div id="filet">
<div id="cut-slider">
<ul id="slider4" class="sliders">
<li><img src="img/slider-img/filet1.jpg" /></li>
<li><img src="img/slider-img/filet-box.jpg" /></li>
<li><img src="img/slider-img/filet2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Sirloin Filet Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end filet-->
<!---------------------chuck------------------------->
<div id="chuck">
<div id="cut-slider">
<ul id="slider5" class="sliders">
<li><img src="img/slider-img/chuck1.jpg" /></li>
<li><img src="img/slider-img/chuck-box.jpg" /></li>
<li><img src="img/slider-img/chuck2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Chuck Steak</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end chuck-->
<!---------------------beefpatty------------------------->
<div id="beefpatty">
<div id="cut-slider">
<ul id="slider6" class="sliders">
<li><img src="img/slider-img/patty1.jpg" /></li>
<li><img src="img/slider-img/patty-box.jpg" /></li>
<li><img src="img/slider-img/patty2.jpg" /></li>
</ul>
</div>
<div id="details">
<h3>Name of cut:</h3>
<p class="detail-copy">Ground Beef Patty</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
<h3>Name of cut:</h3>
<p class="detail-copy">Breast</p>
<h3>Flavor Profile:</h3>
<p class="detail-copy">It tastes like chicken. Everything tastes like chicken.</p>
<h3>Size:</h3>
<p class="detail-copy">10-12 oz</p>
<h3>Recommendations:</h3>
<p class="detail-copy">It puts the lotion in the basket, or else it gets the hose again.</p>
</div>
</div> <!--end beefpatty-->
</div> <!--end meat wrap-->
</div> <!--end container-->
<div id="footer"></div>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#slider1').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider2').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider3').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider4').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider5').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$('#slider6').bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
});
</script>
<!--show/hide effects-->
<script type = "text/javascript" >
$(document).ready(function() {
function hideContent() {
var l = elements.length;
while (l--) {
$('#' + elements[l]).hide();
}
}
var elements = ['strip', 'tbone', 'sirloin', 'filet', 'chuck', 'beefpatty'];
hideContent();
$('#strip').show();
$("#strip_btn").addClass('active_btn');
$('.buttons').click(function() {
var page = $(this).attr('id').split('_')[0]; //this gives you the target page id
hideContent();
$('.buttons').removeClass('active_btn');
$('#' + page).show();
$(this).addClass('active_btn');
$('.sliders').bxSlider().reloadSlider();
});
});
</script>
</body>
</html>
最佳答案
好的，像这样:
您有 ul 元素，它们是 slider 并具有诸如“slider1”、“slider2”之类的 id。
给那些家伙一个类，比如“ slider ”
然后运行:
$('.sliders').bxSlider().reloadSlider();
重新加载 slider 。
您可以在控制台中自行尝试。例如，当您单击第二个链接:T-Bone Steak 时， slider 会断开。然后打开控制台并运行:
$('#slider2').bxSlider().reloadSlider();
重新加载该 slider 。
只需给他们一个类，然后在每次点击时重新加载整个类。
可选地优化所有代码，为所有链接/按钮提供一个类，例如按钮，然后重写所有内容:
<script type = "text/javascript" >
$(document).ready(function() {
function makeSlider($el) {
$el.bxSlider({
mode: 'horizontal',
auto: false,
autoControls: false,
pause: 3000,
useCSS: false
});
$el.addClass('activeSlider');
}
function hideContent() {
var l = elements.length;
while (l--) {
$('#' + elements[l]).hide();
}
}
var elements = ['strip', 'tbone', 'sirloin', 'filet', 'chuck', 'beefpatty'];
makeSlider($('#slider1'));
hideContent();
$('#strip').show();
$("#strip_btn").addClass('active_btn');
$('.buttons').click(function() {
var page = $(this).attr('id').split('_')[0]; //this gives you the target page id
hideContent();
$('.buttons').removeClass('active_btn');
$('.activeSlider').bxSlider().destroySlider();
$('.activeSlider').removeClass('activeSlider');
$('#' + page).show();
$(this).addClass('active_btn');
makeSlider($('#'+page+' .sliders'));
});
});
</script>
好的，通过这样做，我们删除了所有不必要的 slider ，只有一个 slider ，每当我们显示不同的页面时，我们都会构建和解构它。
关于javascript - 如何使用 jQuery 显示/隐藏事件重新加载 jQuery 幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19610900/