jQuery show/hide 이벤트로 jQuery 슬라이드 쇼를 다시로드하려면 어떻게해야합니까?

jQuery를 사용하여 페이지에서 div를 표시하거나 숨 깁니다. 각 div 내에서 jQuery 슬라이드 쇼가 있습니다. 첫 번째는 작동하지만 다음 div로 넘어갈 때 슬라이더가 부러집니다. (참조 : http://www.parker-gibson.com/mqm_test/hawkeye_beef.html). 모든 쇼/숨기기 이벤트가 끝난 후 슬라이더를 다시로드해야한다고 들었지만 어떻게 될지 모르겠습니다. 별로 jQuery는 잘 알고 있지 않습니다. 어떤 도움을 주셔서 감사합니다 !!jQuery show/hide 이벤트로 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>

출처

2013-10-26 pixel_priest

확인이 같은 : 당신은 "slider1", "슬라이더 2"로 슬라이더하고 ID를 가지고 UL 요소가

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

슬라이더를 다시로드하려면 :

는 "슬라이더"

그리고 실행으로 그 사람에게 클래스를 지정합니다.

콘솔에서 직접 시도 할 수 있습니다. 예를 들어 두 번째 링크 인 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>

OK 하나는 우리가 다른 페이지를 보여줄 때마다 구성하고 해체합니다.

출처

2013-10-26 19:39:08 tomca32

설명해 주셔서 감사합니다. 당신 말이 맞아요, 내가 그것을 실행할 때 콘솔에서 작동합니다. 모든 sl 요소에 클래스 "슬라이더"를 추가했습니다. 코드에서 $ ('. 슬라이더')를 실행합니다 .bxSlider(). reloadSlider(); ? –

클릭 핸들러에서. 그러나 실제로는 모든 클릭 핸들러를 5 개가 아닌 하나의 핸들러로 다시 작성할 수도 있습니다. 내가 너를 위해서 할 수 있는지 보자. 몇 분만 나 한테 줘. – tomca32

이봐, 너는 내 목숨을 구하고있다. 고맙습니다! 잠시 동안 내 머리를 때리고 있었어요 –

jQuery show/hide 이벤트로 jQuery 슬라이드 쇼를 다시로드하려면 어떻게해야합니까?

답변

관련 문제