Question

我有用户添加的元素（当他们点击按钮时），它添加了一个p和一个pre元素。 pre元素是不可见的，没有类，而p元素有一个“query-p”类。

我要做的是，每当用户点击带有“data-id ='p1'”的ap元素时，它就会使用“data-id =”将类“show”添加到pre元素中'pre1'“或者例如当您点击带有”data-id ='p2'“的ap元素时，它会将”show“类添加到pre元素中，并带有”data-id ='pre2'“，依此类推。 / p>

这是我的jquery代码：

$(function () {
    $("p[data-id]").on("click", function() {
    var idFound = $(this).data("id");

            if ($("p[data-id]").attr("class") == "query-p" && $("pre[data-id]").attr("class") != "show") {
                        $("pre[data-id]").attr("class", "show");
            }
            else if ($("pre[data-id]").attr("class") == "show") {
                        $("pre[data-id]").removeAttr("class");
            }
    });
});

这是我的HTML（我正在使用的元素不在此代码中，我把它放在这里因为它可能有帮助）：https://pastebin.com/eKVbUZHQ

这是我的其他javascript文件（它主要包含添加我正在使用的元素的代码）：https://pastebin.com/yEZuuhA8

我遇到的问题是我的代码显示了所有前置元素，而不仅仅是它应该使用的元素。

示例：
我添加了新元素：

p element 1：id =“display-pre1”class =“query-p”data-id =“p1” pre element 1：id =“display-pre-a1”data-id =“pre1”

p element 2：id =“display-pre2”class =“query-p”data-id =“p2” pre element 2：id =“display-pre-a2”data-id =“pre2”

pre元素隐藏为“display：'none'”。类“show”的所有元素都有“display：'block'”。 pre元素没有类。

现在，每当我点击第一个p元素时，它会将“show”类添加到pre元素1和pre元素2中，因此当我再次单击它时它们都会显示“display：'block'”它再次隐藏了两个前置元素。

希望这有点帮助。

Answer 1

点击处理程序中的一些问题：

使用$("p[data-id]")，您选择所有带有p属性的 data-id元素，而您只需选择点击的元素。
使用$("pre[data-id]")，您选择所有带有pre属性的 data-id元素，而您只需选择具有该属性特定值的元素。< / LI>
您将类属性与"query-p"进行比较，但为什么不将这个条件设置为仅为那些定义了单击处理程序？然后，一旦用户点击，您就不必再检查它了。
attr("class")和removeAttr("class")的代码假定一个元素最多只有一个CSS类。这限制了可能性。应该允许元素为其定义多个CSS类。

这是一个小小的片段，演示它是如何工作的：

$(function () {
    $("p.query-p[data-id]").on("click", function() {
        var data = $(this).data("id").replace(/^p/, "pre"),
            $pre = $("pre[data-id=" + data + "]");
        $pre.toggleClass("show");
    });
});

pre { display: none }
pre.show { display: block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="query-p" data-id="p1">para 1</p>
<p class="query-p" data-id="p2">para 2</p>
<pre data-id="pre1">pre 1</pre>
<pre data-id="pre2">pre 2</pre>

用jquery切换对象的类

1 个答案: