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>的引用。在定义的函数中，您应该能够使用$（this）获得对按钮的引用。根据您的格式，您现在应该能够获得

说你的标记是：

<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过滤），在这种情况下只是你的{{1} }。根据他们彼此之间的定位，您可能需要使用其中一个jQuery traversing functions。

Answer 2

你需要以某种方式将显示/隐藏按钮绑定到他们将要操作的各自的div。

您可以将它们封装在单个<LI>元素中，或者为它们提供通用ID来标识哪个按钮控制哪个div。

以下是<LI>示例：

<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 3

试试这个：

<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"); });

尝试使用Jquery切换多个DIV

3 个答案: