Question

我知道这个问题有几个问题/解决方案，我正在寻找两个简单解决方案的组合（我不是编码器，只是复制/粘贴/操纵器）所以这里是：我需要一个脚本涉及一个按钮，用于切换显示/隐藏大图像图顶部的div，其功能是打开/关闭每个div中包含的标签。由于imagemap很大并且包含组，我正在寻找一种循环以下功能脚本的方法：

  $(document).ready(function() {
  $(".hide").click(function() {
    $(this).siblings(".hideShow").hide();
  });
  $(".show").click(function() {
    $(this).siblings(".hideShow").show();
  });
  });

需要循环，因为我将有超过200个标签来切换（删除它们将清除一些视觉空间）。上面的html列出了两个按钮，而我只需要在两个按钮之间切换，就像这个jquery位后面的那个：

  var toggleState = false;
$('.show').click(function() {
$(".text").toggle();
$(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
toggleState = !toggleState;
})

前jfiddle在这里找到：http://jsfiddle.net/MztAm/ 后者在这里：http://jsfiddle.net/y8ZTj/1/

实际上，由于后一个脚本更令人满意，是否可以将其转换为循环，替换＆＃34; .text＆＃34;容纳许多情况？

我能想到的最好：http://jsfiddle.net/qmv3dmya/虽然我需要为每个分组提供一个新的jquery片段。但我最终会把这个系列放在一个单独的* .js表中，以供主页引用。

Answer 1

我可能无法正确理解您的问题，但如果我这样做，那么这些信息可能会有所帮助：

（1）你不需要循环。使用jQuery，选择all DIVs with class="text"如下所示：

$('.show').click(function() {
    $(".text").toggle();
});

（2）这一位：$(".text")创建一个对象，其中包含所有具有class="text"

的DIV的列表

（3）这一位：.toggle()将该方法应用于 $('.text')中包含的每个元素

因此，具有class="text"的所有元素将作为一组切换为可见/不可见。不需要循环。

jsFiddle Demo

如果你需要一个循环，你可以使用.each()，如下所示：

$('.text').each(function(){
    // Whatever you do in here will be done once to each DIV 
    // (or other element) contained in the object ("list") of
    // all elements with `class="text"`
});

Answer 2

您可以siblings功能见下文。

<强> Jquery的：

var toggleState = false;

$('.show').click(function() {
    $(this).siblings(".text").toggle();
    $(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
    toggleState = !toggleState;
});

<强> DEMO

切换div show / hide

2 个答案: