Question

这个jquery翻转滑块在我的wordpress页面中正常工作。我想在同一页面中使用此滑块十次。如何处理该代码

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

Answer 1

您可能希望为每个面板的DOM节点添加唯一属性，而不是使用id $('#<element-id>')选择器。可以使用$('#<element-id>')，但代码很容易混乱。

您可以随意命名此属性，只要它不是现有/保留的html属性。

例如，让我们将属性命名为“panel-id”。我们的标记看起来像这样：

    <div panel-id="1">Panel 1</div>
    <div panel-id="2">Panel 2</div>

    <button toggle-panel-id="1">Flip Panel 1</button>

然后，我们希望使用attribute equals selector选择我们想要使用panel-id属性定位的元素。

例如，要使用面板ID为“1”来切换<div>，我们会使用：

    $('[panel-id="1"]').slideToggle("slow");

要分配我们想要切换的按钮，我们希望为我们的按钮分配相应的ID（如下例中的toggle-panel-id）。这看起来像是：

    $("button[toggle-panel-id]").click(function(){
        var panel_id = $(this).attr('toggle-panel-id'); // Get our corresponding panel id
        $('[panel-id="'+panel_id+'"]').slideToggle("slow");
    });

要查看此操作，请查看我的JSFiddle example

Answer 2

只要元素标识符都是唯一的（#flip1，#flip2，#flip3和#panel1，#panel2，#panel3），你的代码应该可以正常工作。

无法在同一页面上使用多个jquery幻灯片切换

2 个答案: