[英]slideToggle not working for multiple divs
我的PHP循環吐出所有汽車,因此每輛汽車都具有相同的div ID和類,但信息不同我的問題是我的插件僅適用於同一div,這是第一個,因為它們都被命名為相同的
我如何才能使此功能變得智能,以了解應該隱藏或顯示哪些div內容
查看我的示例http://jsfiddle.net/S2HEw/
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv:hidden').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
$(document).ready(function(){
$('.show_hide').showHide({
speed: 250, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
在html中,有很多這樣的名稱,它們都具有相同的名稱,這就是為什么我的切換按鈕失敗的原因,
<a class="show_hide" href="#" rel="#slidingDiv">View</a>
<div id="slidingDiv" class="toggleDiv" style="display: none;">
<div class="right">
</div>
</div>
請注意,我無法更新我的php循環,所以我真的需要找到一種方法讓jquery知道它正在使用哪個div,即使它們都具有相同的div ID? 我可以讓php做一個越來越多的數字,並將其附加到類中,然后在jquery端? 看到這就是我卡住的地方
我不知道如何使這項工作動態
您有slidingDiv
元素的重復ID。 元素的id
在文檔中必須唯一
從doc獲得ID屬性
id屬性指定其元素的唯一標識符(ID)。 該值在元素的主子樹中的所有ID中必須唯一,並且必須至少包含一個字符。 該值不得包含任何空格字符 。
<!-- DIV 1-->
<a class="show_hide" href="#" rel="#slidingDiv1">View</a>
<div id="slidingDiv1" class="toggleDiv" style="display: none;">
<div class="right">
DIV 1
</div>
</div>
<!-- DIV 2-->
<a class="show_hide" href="#" rel="#slidingDiv2">View</a>
<div id="slidingDiv2" class="toggleDiv" style="display: none;">
<div class="right">
DIV 2
</div>
</div>
<!-- DIV 3-->
<a class="show_hide" href="#" rel="#slidingDiv3">View</a>
<div id="slidingDiv3" class="toggleDiv" style="display: none;">
<div class="right">
DIV 3
</div>
</div>
另外,需要使用:visible而不是:hidden
$('.toggleDiv:visible').slideUp(options.speed, options.easing);
演示: 小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.