0

我一直试图让这个功能工作一段时间。我有 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 时触发了该函数。我还包括了一些图像交换和显示所有功能。

4

3 回答 3

0

您想要做的是<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 过滤），在这种情况下就是你的<div>. 但是，根据它们相互定位的方式，您可能需要使用其他jQuery 遍历函数之一。

于 2009-11-20T15:48:51.990 回答
0

您需要以某种方式将显示/隐藏按钮与他们将采取行动的各自 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 选择器将需要调整

于 2009-11-20T15:56:06.643 回答
0

尝试这个：

<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"); });
于 2009-11-20T15:59:54.387 回答