Question

我正在使用jQuery切换链接和div。我最终会有约。我希望切换50个div，而不是为每个创建一个新函数，有没有办法可以创建一个类并让它为每个div读取唯一的ID？（如果这是有道理的）

例如，我将有A1，A2，A3，B1，B2，B3..e.tc ..

  $(document).ready(function() {

  $('#slickbox').hide();


  $('a#slick-toggleA1').click(function() {
    $('#A1').toggle(300);
    return false;
  });



});

Answer 1

HTML

<a class="clicker" href="#box1">Box 1</a>

<div class="coolbox" id="box1">I'm hidden!</div>

的JavaScript

$('.coolbox').hide();

$('.clicker').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle(300);
});

Answer 2

您可以使用.each()：

遍历包装集

$('div').each(function(i){
  $(this).toggle(300);

});

当然你可以通过选择器限制一个包装集。另外，cou可以在所有div上使用.filter()来查找要切换的div。

Answer 3

因此，我们将课程slick-toggle添加到您的a代码中。并允许更改其ID to something more definitively parseable - slick-toggle- $ ID`，其中$ ID是要切换的div的ID。然后我们在$ .ready中执行此操作...

$('a.slick-toggle').click(function(){
   var divId = '#'+$(this).attr('id').split('-').pop();
   $(divId).toggle();
   return false;
});

Answer 4

你可以使用不同的选择器来进行div的替换。例如类或自定义属性

$('.clicker').click(function(){
  $('[toggeled]').toggle(300);
  return false;
}

考虑以下标记

<div class="clicker">Click Me</div>
<div id="first" toggled="true">First to hide</div>
<div id="second" toggled="true">second to hide</div>
<div id="third" toggled="true">third to hide</div>

Answer 5

如果您为链接指定了一个类并使用了href，请执行以下操作：

<a class="opener" href="#A1">Open A1</a>
<div id="A1">Content here</div>

使用这个jQuery：

$('a.opener').click(function() {
  $(this.href).toggle(300);
  return false;
});

如果禁用了javascript，锚点仍然会导航到页面上的div。

Answer 6

为链接指定一个类，并在“rel”属性中添加要切换的div的ID - 这甚至符合标准。

然后你的功能看起来像这样：

$('a.specialClass').click(function(){
  $('#'+$(this).attr('rel')).toggle(300);
  return false;
}

jQuery切换多个独特的DIV？

6 个答案:

HTML

的JavaScript