试图用Jquery切换多个DIV的

我一直试图让这个函数现在工作一段时间。我有11个不同的div默认隐藏。每个人都有一个“触发”按钮，应该让他们弹开。我能够为每个特定的div使用更长的一系列函数来实现这个功能（最终大约有175行代码！）。我想把它压缩成一个单一的功能，它会做同样的事情，即：触发器1被点击 - div 1打开/触发器1再次点击，div 1关闭等等等。试图用Jquery切换多个DIV的

这是我的脚本现在

$(document).ready(function() { 

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

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


    }); 


});

它目前打开所有“HiddenVehicles”divs，我需要使它更具体。我对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并有功能火被点击时股利。我还包括一些图像交换和显示全部功能。

来源

2009-11-20 RachelGatlin

你想要做的是从你定义的函数中获得对特定<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 traversing functions之一。

来源

2009-11-20 15:48:51

你需要以某种方式将显示/隐藏按钮绑定到他们将要执行的各自的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-20 15:56:06 duckyflip

我不相信最接近（）会在这种情况下工作，因为它只能返回父元素，而不是兄弟姐妹。 – 2009-11-20 16:05:22

试试这个：

<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-20 15:59:54

试图用Jquery切换多个DIV的

回答

相关问题