Question

我的问题是我有2个jquery切换，上面的一个完美地工作，为什么较低的一个没有响应因为HTML重复有任何方法使所有这些工作而不改变类或id（例如： 我不希望每次需要切换时都更改代码）

JS

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

CSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<p>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<p>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

Fiddle here

Answer 1

使用类而不是ID并修改您的脚本，如下所示：

$(document).ready(function(){
    // all flip elements
    $(".flip").click(function(){
        // for each flip find next of type panel
        $(this).next('.panel').slideToggle("slow");
    });
});

小提琴是here

Answer 2

id必须是唯一的，请改用.class。

要切换内容，请使用$('.flip').index(this)获取所点击的div的索引，然后使用.panel:eq($('.flip').index(this))定位需要切换的元素。

＆＃13;

$(document).ready(function() {
  $("div.flip").click(function() {
    $(".panel:eq(" + String(($('.flip').index(this)) + ")")).slideToggle("slow");
  });
});

＆＃13;

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
.panel {
  padding: 50px;
  display: none;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flip">Click to slide Working</div>
<div class="panel">Hello world!</div>
<p>
  <div class="flip">not Working</div>
  <div class="panel">Hello world!</div>
</p>
<p>
  <div class="flip">not Working</div>
  <div class="panel">Hello world!</div>
</p>is there a general way to make all of them work without making changes each time.

＆＃13;

Answer 3

如果您必须在代码中执行类似的slideToggle()，请使用this关键字但是为了使用这个关键字而不是使用ID的使用类，因为ID在页面中是唯一的，我们在页面中不能有两个相同名称的ID。

div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>

Jquery的

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next('.panel').slideToggle("slow");
    });
});

Answer 4

使用类而不是ID

<div class="flip"></div>
<div class="panel></div>
<div class="flip"></div>
<div class="panel"></div>

的jQuery

$(".flip").each(function(){
    //Do stuff
});

Answer 5

在这种情况下，您必须使用类而不是id。然后

$(document).ready(function() {
    $('.panel').hide();
    $('.flip').click(function() {
        $(this).closest('.panel').slideToggle(500);
    });
});

html代码就像这样

<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>**

jQuery Multiple Toggle

5 个答案: