jQuery幻灯片重复代码

我想知道是否有一种方法可以使用最少的代码创建多个幻灯片和面板，并避免这种情况：

$(document).ready(function(){
    $("#slide1").click(function(){
        $("#panel1").slideToggle("slow");
    });
    $("#slide2").click(function(){
        $("#panel2").slideToggle("slow");
    });
});

---

如您所见，对于每一对面板和幻灯片，我必须创建3行新的jQuery。有没有办法避免这种情况？我也对使用Javascript的解决方案持开放态度。这样做的目的是只需要几行代码，对于涉及的每个面板和幻灯片，我不需要添加任何代码。我只需要添加一个幻灯片和面板，它就会正常工作。

在这种情况下，包含HTML非常重要。根据面板和幻灯片之间的关系，您可以使用.sides、.parent、children等

但是，假设它们根本不相关，并且需要通过唯一ID进行选择

为所有幻灯片设置一个公共类：

<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>

正如下面的评论中所建议的，如果您的幻灯片是唯一以单词slide开头的元素，您可以使用通配符选择器通过以“slide”开头的ID来匹配它们，如下所示：

$([id=^"slide"]).click(function() { ... });

您不需要像我在本例前面所建议的那样实现公共类。

为此，我将使用jquery中的each函数。与Santi的建议类似，首先需要一个公共标识符来捕获查询中需要的每个元素。您可以按照他所说的做，手动向每个元素添加一个类。您还可以使用“^开头”来匹配id以“panel”开头的元素。然后，在each函数中，您将使用$this变量引用要添加slideToggle的DOM元素：

js:

---

$“[id^=panel]”是匹配id以“panel”开头的元素的方式。

我会在指向要切换的面板的单击目标上添加一个数据属性

<div data-panel-target="#panel1"></div>
<div id="#panel1"></div>

---

给你所有的幻灯片上一堂课，比如class=slides。使用单个处理程序（如$.slides.click）将click事件放在所有这些事件上。从当前ID中删除单词slide:var slideNumber=$this.attrid.replaceslide，；因此，您只剩下一个数字，并将其连接到面板，如：$panel+slideNumber.slideToggleslow；。是的，你可以基于你的HTML，你可以使用$this或index或许多其他方法来建立每张幻灯片和面板之间的关系。包括你的HTMLEven simpler不要使用公共类你可以使用attr选择器，如$[id=^slide]Yeah@DaniP我认为，这有点模糊，因为这些实现经常有id=slide容器作为父对象等。你请求HTML是正确的，也许我在发布答案时有点仓促，我很欣赏你的建议。不，现在你的第一段做出了很好的澄清：首先，这并没有隐藏一个特定的面板，它隐藏了所有面板。考虑到这一点，如果你只是想把它们全部隐藏起来，为什么还要循环它们呢？如果这是目的，$'[id^=panel]'.slideToggle'slow'；“那就足够了。”桑蒂我写得太快了；忘记添加单击事件处理程序。

$('[id^=panel]').each(function(){
    /* Comment
       Inside this function, "$(this)" would be the element
       just the same as if you said: $('#panel1')
    End Comment */

    $(this).click(function(){
        slideToggle('slow');
    });
});

<div data-panel-target="#panel1"></div>
<div id="#panel1"></div>

$(document).ready(function(){
    $("[data-panel-target]").click(function(){
        var target = $(this).data('panel-target');
        $(target).slideToggle("slow");
    });
});