jQuery 滑动重复代码

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 选择...

给你所有的幻灯片一个通用的 class:

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

将处理程序放在公共 class 而不是单独的 ID 上，并获取 "slide number"，使用 $(this) 引用单击的幻灯片。您可以获得 ID 并从中删除单词 "slide"，因此您只剩下 "slide number"。然后，"#panel" + slideNumber 应该会给你相关的面板。

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

正如下面评论中 DaniP 所建议的那样，如果您的幻灯片是唯一以单词 "slide" 开头的元素，您可以使用通配符选择器通过 "ID starting with 'slide'" 来匹配它们，像这样：

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

您不需要像我之前在这种情况下建议的那样实施通用 class。

Answer 2

为此，我会使用 jquery 中的 each() 函数。与 Santi 的建议类似，您首先需要一个通用标识符来捕获您想要在查询中使用的每个元素。你可以照他说的做，给每个元素手动添加一个class。您还可以使用 'begins with' (^) 来匹配具有以 'panel' 开头的 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 滑动重复代码

jQuery slide repeated code

jquery

slide