Question

我需要帮助使用以下代码切换多个div。它适用于一个div，但我将使用php循环多个div，因此无法定位每个循环以提供唯一的ID或类。

以下是代码，请帮助解决正确的JQuery

function clickHandler() {
$('#hide').toggle();
$('#show').toggle();
$('.more-content').toggle('slow');

}

$(document).ready(function(){
    $('#hide, .more-content').hide();

    $('#hide, #show').on('click', clickHandler);
});

HTML

<div class="more-content">
      <!--These are the contents-->               
</div>

<button id="hide" class="more_arrow">Collapse <span class="fa fa-chevron-up"></span></button>

<button id="show" class="more_arrow">Expand <span class="fa fa-chevron-down"></span></button>

Answer 1

使用重复组件时，您不想使用ID，而是希望对公共元素使用公共类。然后为每个重复的“模块”使用外部容器。

然后，您可以通过仅在该模块实例中搜索来隔离每个“模块”中的组件

HTML - 可以根据需要重复多个<article>，该脚本将独立地适用于所有实例

<article>
    <div class="content"></div>
    <div class="more-content"></div>
    <button class="hide" class="more_arrow">Collapse</button>
    <button class="show" class="more_arrow">Expand</button>
</article>

JS

$('.hide, .more-content').hide();// should be done with css not js

$('.hide, .show').on('click', clickHandler);

function clickHandler() {
   $(this).toggle()
           .siblings('.hide, .show')
           .toggle()
           // only toggle more-content within this instance of <article>
           .parent().find('.more-content')
           .toggle('slow');
}

Answer 2

你必须给你的div同一个类，例如'my-class'并隐藏或显示它们取决于点击的按钮。

$(document).ready(function(){
    $('#hide').on('click', function(){
         // Hide all elements which have my-class class
         $('.my-class').hide();
    });

    $('#show').on('click', function(){
         // Show all elements which have my-class class
         $('.my-class').show();
    });
});

您也可以按属性值获取元素。例如，通过id值

$('[id=test]')

如果你给你的元素ids前缀，你应该能够通过这个表达式获得所有这些

$('[id^=test]')

通过将^标记更改为$，您可以使用指定的后缀

搜索元素

Answer 3

您可以使用处理程序中的$（this）来定位当前单击的div，所以

function clickHandler() { 
   $(this).toggle(); 
 }

将切换当前点击的div。

您可以将附近的div切换为使用此

单击的div

 $(this).nearest('.someclass').toggle();

使用您想要访问重复元素的类。

Answer 4

试试这个：

jsFiddle Demo

首先，在容器DIV中包围每个内容DIV +按钮。

然后，使用jQuery遍历方法prevAll()和<div class="container"> <div class="more-content"> Once upon a midnight dreary, while I pondered, weak and weary, Over many a quaint and curious volume of forgotten lore — While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. "'Tis some visiter," I muttered, "tapping at my chamber door — Only this and nothing more." </div> <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button> <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button> </div> <div class="container"> <div class="more-content"> The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. The quick brown fox jumped. </div> <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button> <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button> </div> <div class="container"> <div class="more-content"> Whatsoever things are true, whatsoever things are honest, whatsoever things are just, whatsoever things are pure, whatsoever things are lovely, whatsoever things are of good report; if there be any virtue, and if there be any praise, think on these things. </div> <button class="hide more_arrow">Collapse <span class="fa fa-chevron-up"></span></button> <button class="show more_arrow">Expand <span class="fa fa-chevron-down"></span></button> </div>来切换适当的DIV。

<强> HTML：

$(document).ready(function(){
    $('#hide, .more-content').hide();

    $('#hide, #show').on('click', function(){
        $(this).prevAll('.more-content').toggle('slow');
        $(this).siblings('button').toggle();
        $(this).toggle();
    });

});

<强> jQuery的：

{{1}}

Answer 5

嗯......看起来我花了太多时间试着写回复。无论如何here's another just not to let it go to waste.

JS：

function clickHandler() {
  console.log($(this).data('link'))
  var link = $(this).data('link');
  $('.hide[data-link=' + link + ']').toggle();
  $('.show[data-link=' + link + ']').toggle();
  $('.more-content[data-link=' + link + ']').toggle('slow');

}

$(document).ready(function(){
    $('.hide, .more-content').hide();
    $('.hide, .show').on('click', clickHandler);
});

HTML：

    <div class="more-content" data-link="0">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="0">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="0">Expand <span class="fa fa-chevron-down"></span></button>
    <div class="more-content" data-link="1">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="1">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="1">Expand <span class="fa fa-chevron-down"></span></button>
    <div class="more-content" data-link="2">
      <!--These are the contents-->               
    </div>
    <button class="hide" class="more_arrow" data-link="2">Collapse <span class="fa fa-chevron-up"></span></button>

<button class="show" class="more_arrow" data-link="2">Expand <span class="fa fa-chevron-down"></span></button>

基本上，您需要一个变量来指定哪个按钮应链接到哪个div。然后你需要将该变量放在某种属性中。我选择了一个名为“link”的数据属性，但您也可以使用类名。

使用JQuery切换多个DIV：包含代码

5 个答案: