Question

您好

情景：

在包含动态创建的行的结果表中，必须有一个段落，在单击时打开一个面板。当然，它们都具有相同的id或类名，因为它们是动态生成的，所以它们应该由＆＃34引用;这个＆＃34;为了避免在点击一个段落时所有行的所有面板都打开。

这就是我所拥有的：

<script> 
    $(document).ready(function(){
    $("#changetext").click(function(){
    $(".panel").toggle();
    $('#changetext').text("Click to close/Open");
    });    
});

</script>

在CSS代码中，我默认将面板隐藏（显示：无）

并且HTML块是：

        <p id="changetext">Click to contact this owner</p>

        <div class="panel">
        //block of code, a mail form for example
        </div>

所以，目前我只有一行，所以它可以正常切换面板但是因为我会有更多结果，我预计如果我点击一行，所有行的所有面板都将打开。我知道使用＆＃34;这个＆＃34;但是，当您单击的元素与要进行更改的元素相同时，就像您单击按钮并希望其值显示更改一样，但这里有两个不同的东西，一个是带有更改文字＆＃34;另一个是div，就是小组。

Answer 1

当然所有ID都相同， HTML中的ID必须是唯一的。您应该使用类选择器。

使用类似的东西：

HTML 的

    <p class="changetext">Click to contact this owner</p>
    <div class="panel">
        //block of code, a mail form for example
    </div>

脚本

$(document).on('click', '.changetext', function () {
    $(this).next(".panel").toggle(); //Use .next()
    $(this).text("Click to close/Open");
});

DEMO

使用“this”来避免对所有相关DOM元素的级联效果

1 个答案: