Question

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

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

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

Answer 1

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

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

为所有幻灯片提供一个共同的课程：

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

将处理程序放在公共类而不是单独的ID上，并使用$(this)获取＆＃34;幻灯片编号＆＃34;以引用单击的幻灯片。您可以获取ID并删除单词＆＃34; slide＆＃34;从它，所以你留下的是＆＃34;幻灯片编号＆＃34;。然后，"#panel" + slideNumber应该会为您提供相关的面板。

$(".slide").click(function(){
    var slideNumber = $(this).attr("id").replace("slide","");
    $("#panel" + slideNumber).slideToggle("slow");
});

正如DaniP在下面的评论中建议的那样，如果您的幻灯片是唯一以单词＆＃34; slide＆＃34;开头的元素，则可以使用通配符选择器将它们与＃34;匹配。 ID以＆＃39; slide＆＃39;＆＃34;开头的ID，如下所示：

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

你不需要像我之前在本案例中所建议的那样实现公共类。

Answer 2

我会在jquery中使用each()函数。与Santi建议的类似，您首先需要一个通用标识符来捕获查询中所需的每个元素。你可以做他说的，并手动为每个元素添加一个类。您还可以使用“以...开头”（^）来匹配以“{”开头的id元素。然后在each()函数中，您将使用$(this)变量来引用要添加slideToggle()的DOM元素：

JS：

$('[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');
    });
});

$('[id^=panel]')是如何将元素与以{panel'开头的id匹配。

Answer 3

我会在点击目标（ #slideXX ）上添加指向要切换的面板的数据属性

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

jQuery幻灯片重复代码

3 个答案: