1

jQuery を使用して、ページ上の div を表示/非表示にしています。各 div 内に、jQuery スライドショーがあります。最初のものは機能しますが、次の div をクリックすると、スライダーが壊れます。(参照: http://www.parker-gibson.com/mqm_test/hawkeye_beef.html )。表示/非表示イベントごとにスライダーをリロードする必要があると言われましたが、方法がわかりません。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>
4

1 に答える 1

2

このようにOK：

スライダーであり、「slider1」、「slider2」などの id を持つ ul 要素があります。

それらの人に「スライダー」などのクラスを与えます

そして実行します：

$('.sliders').bxSlider().reloadSlider();

スライダーをリロードします。

コンソールで自分で試すことができます。たとえば、2 番目のリンクである T-Bone Steak をクリックすると、スライダーが壊れます。次に、コンソールを開いて実行します。

$('#slider2').bxSlider().reloadSlider();

そのスライダーをリロードします。

それらすべてにクラスを与えてから、クリックするたびにクラス全体をリロードしてください。

オプションですべてのコードを最適化するには、すべてのリンク/ボタンにボタンなどのクラスを与え、すべてを次のように書き換えます。

<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>

これを行うことで、不要なスライダーをすべて削除し、1 つだけになりました。これは、異なるページを表示するたびに構築および分解します。

于 2013-10-26T19:39:08.927 に答える