尝试使用 Jquery 切换多个 DIV

Question

我一直在努力让这个功能发挥作用一段时间了。我有 11 个默认隐藏的不同 div。每个都有一个“触发”按钮，可以让它们弹出。我能够为每个特定的 div 使用更长的一系列函数来完成此操作（最终大约有 175 行代码！）。我想将其压缩为一个可以执行相同操作的函数，即：单击触发器 1 - div 1 打开/再次单击触发器 1，div 1 关闭等等。

这是我的脚本，目前

 $(document).ready(function() {

    $("[class^='ShowVehicles']").toggle(function() {
    alert("click happened");
        $("[class^='HiddenVehicles']").slideDown(1000);

             }, 
        function () {
        $("[class^='HiddenVehicles']").slideUp(1000);


    });


});

正在打开所有“HiddenVehicles”div，我需要使其更加具体。我对 jquery 相当陌生，所以我几乎没有什么想法。预先感谢各位！

编辑 - 感谢所有帮助人员，这是我想出的解决方案：

 $(document).ready(function() {

    $("div.WrapIt").toggle(

    function(){ $(".HiddenVehicles", this).slideDown(1000);
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
     },

    function(){ $(".HiddenVehicles", this).slideUp(1000);
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif")
    }

);

  $(".ShowEveryThing").toggle(
 function() { $(".WrapIt .HiddenVehicles").slideDown(1000);
 $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
 $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideBtn.gif");
  },
   function(){ $(".WrapIt .HiddenVehicles").slideUp(1000);
    $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif");
    $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowBtn.gif");
   });

});

我创建了一个包装器 div，并在单击该 div 时触发了该函数。我还包括一些图像交换和显示所有功能。

Answer 1

您需要以某种方式将显示/隐藏按钮绑定到它们将执行操作的各自的 div 上。

您可以通过将它们封装在单个

元素中或为它们提供通用 ID 来识别哪个按钮控制哪个 div 来实现此目的。

下面是

示例：

<ul id="playground">
  <li>
    <div>HELLO WORLD 1</div>
    <button>Show/Hide 1</button>
  </li>
  <li>
    <div>HELLO WORLD 2</div>
    <button>Show/Hide 2</button>
  </li>
  <li>
    <div>HELLO WORLD 3</div>
    <button>Show/Hide 3</button>
  </li>
</ul>

jQuery 功能如下：

jQuery("#playground button").click(function(){
  $(this).closest("div").toggle()
})

JS 代码很大程度上取决于您的 HTML 结构，因此如果您决定使其显着不同，则某些 jQuery 选择器将需要待调整

Answer 2

试试这个：

<span class="header">Item1</span>
<p style="display: none;">This is the content of item1...</p>
<span class="header">Item2</span>
<p style="display: none;">This is the content of item2...</p>

---

$(".header").click(function() { $(this).next("p").slideToggle("slow"); });

Answer 3

您想要做的是从您定义的函数中获取对特定

的引用。在定义的函数中，您应该能够使用 $(this) 获取对按钮的引用。根据您的格式，您现在应该能够得到

Say your markup is:

<div>
    <input type="button" class="ShowVehicles" />
    <div class="HiddenVehicles"></div>
</div>

您现在可以将代码更改为如下所示：

$(".ShowVehicles").toggle(function() {
        $(this).siblings(".HiddenVehicles").slideDown(1000);
    }, 
    function () {
        $(this).siblings(".HiddenVehicles").slideUp(1000);
    }
});

这里的关键是对 siblings() 的调用，这将返回按钮“旁边”的所有元素（然后按 HiddenVehicles 类过滤），在本例中就是您的

。然而，根据它们彼此定位的方式，您可能需要使用其他 jQuery 遍历函数 之一。