使用jQuery切换对象的类(Toggling the class of an object with jquery)

使用jQuery切换对象的类(Toggling the class of an object with jquery)

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

我想要做的就是让用户点击带有“data-id ='p1'”的ap元素时，它会将类“show”添加到pre元素，其中“data-id ='pre1' “或者例如，当您点击”data-id ='p2'“的ap元素时，它会将类”show“添加到pre元素，并带有”data-id ='pre2'“等等。

这是我的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

我遇到的问题是我的代码显示所有pre元素而不是它应该的那个。

示例： 我添加了新元素：

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

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

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

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

希望这个对你有帮助。

I have elements that are added by the user (when they click a button), it adds a p and a pre element. The pre element is invisible and has no class while the p element has a class of "query-p".

What I'm trying to do is to make it so whenever the user clicks on a p element with "data-id='p1'", it add the class "show" to the pre element with "data-id='pre1'" or for example when you click on a p element with "data-id='p2'", it add the class "show" to the pre element with "data-id='pre2'" and so on.

This is my jquery code :

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

This is my HTML (the elements that I'm working with are not in this code, I put it here because it might help): https://pastebin.com/eKVbUZHQ

This is my other javascript file (it mostly contains the code that adds the elements that I'm working with) : https://pastebin.com/yEZuuhA8

The problem that I'm having is that my code shows all pre elements instead of only the one it's supposed to.

EXAMPLE : I added new elements with :

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"

The pre elements are hidden with "display: 'none'". All elements with class "show" have "display: 'block'". The pre elements have no class.

Now, whenever I click on the first p element, it adds the class "show" to both the pre element 1 and the pre element 2, so they both get "display: 'block'", when I click it again it hides both of the pre elements again.

Hope this helps a bit.

最满意答案

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

使用$("p[data-id]")您可以选择具有data-id属性的所有 p元素，而只需要选择单击的元素。 使用$("pre[data-id]")您可以选择具有data-id属性的所有 pre元素，而只需要为该属性选择一个具有特定值的元素。 您将类属性与"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> 
  
 
Some of the issues within the click handler:
 
 
 With $("p[data-id]") you select all p elements with a data-id attribute, while you need to only select the clicked one. 
 With $("pre[data-id]") you select all pre elements with a data-id attribute, while you need to only select one with a particular value for that attribute. 
 You compare the class attribute with "query-p", but then why not put this condition in a way that the click handler is only defined for those? Then you don't have to check this anymore once the user has clicked. 
 The code with attr("class") and removeAttr("class") assumes that an element will have at the most one CSS class. This is restricting the possibilities. Elements should be allowed to have multiple CSS classes defined for it. 
 
Here is a small snippet to demo how it could work:
 
 
 
  
  
$(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切换对象的类(Toggling the class of an object with jquery)

                
 我有用户添加的元素（当他们点击一个按钮时），它添加了ap和pre元素。 pre元素是不可见的，没有类，而p元素有一类“query-p”。 
 
 我想要做的就是让用户点击带有“data-id ='p1'”的ap元素时，它会将类“show”添加到pre元素，其中“data-id ='pre1' “或者例如，当您点击”data-id ='p2'“的ap元素时，它会将类”show“添加到pre元素，并带有”data-id ='pre2'“等等。 
 
 这是我的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 
 
 我遇到的问题是我的代码显示所有pre元素而不是它应该的那个。 
 
 示例：  我添加了新元素： 
 
 p元素1：id =“display-pre1”class =“query-p”data-id =“p1”pre元素1：id =“display-pre-a1”data-id =“pre1” 
 
 p元素2：id =“display-pre2”class =“query-p”data-id =“p2”pre元素2：id =“display-pre-a2”data-id =“pre2” 
 
 pre元素隐藏着“display：'none'”。 所有具有“show”类的元素都有“display：'block'”。 pre元素没有class。 
 
 现在，每当我点击第一个p元素时，它将类“show”添加到pre元素1和pre元素2中，因此它们都得到“display：'block'”，当我再次单击时它隐藏了两个先前的元素再次。 
 
 希望这个对你有帮助。 
I have elements that are added by the user (when they click a button), it adds a p and a pre element. The pre element is invisible and has no class while the p element has a class of "query-p".
 
What I'm trying to do is to make it so whenever the user clicks on a p element with "data-id='p1'", it add the class "show" to the pre element with "data-id='pre1'" or for example when you click on a p element with "data-id='p2'", it add the class "show" to the pre element with "data-id='pre2'" and so on.
 
This is my jquery code :
 
$(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");
            }
    });
});
 
This is my HTML (the elements that I'm working with are not in this code, I put it here because it might help): https://pastebin.com/eKVbUZHQ
 
This is my other javascript file (it mostly contains the code that adds the elements that I'm working with) : https://pastebin.com/yEZuuhA8
 
The problem that I'm having is that my code shows all pre elements instead of only the one it's supposed to.
 
EXAMPLE : I added new elements with :
 
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"
 
The pre elements are hidden with "display: 'none'". All elements with class "show" have "display: 'block'". The pre elements have no class.
 
Now, whenever I click on the first p element, it adds the class "show" to both the pre element 1 and the pre element 2, so they both get "display: 'block'", when I click it again it hides both of the pre elements again.
 
Hope this helps a bit.
                
最满意答案
                
                    
                        
 点击处理程序中的一些问题： 
 
 
  使用$("p[data-id]")您可以选择具有data-id属性的所有 p元素，而只需要选择单击的元素。  
  使用$("pre[data-id]")您可以选择具有data-id属性的所有 pre元素，而只需要为该属性选择一个具有特定值的元素。  
  您将类属性与"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> 
  
 
Some of the issues within the click handler:
 
 
 With $("p[data-id]") you select all p elements with a data-id attribute, while you need to only select the clicked one. 
 With $("pre[data-id]") you select all pre elements with a data-id attribute, while you need to only select one with a particular value for that attribute. 
 You compare the class attribute with "query-p", but then why not put this condition in a way that the click handler is only defined for those? Then you don't have to check this anymore once the user has clicked. 
 The code with attr("class") and removeAttr("class") assumes that an element will have at the most one CSS class. This is restricting the possibilities. Elements should be allowed to have multiple CSS classes defined for it. 
 
Here is a small snippet to demo how it could work:
 
 
 
  
  
$(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>