使用jQuery切换对象的类

Question

I have elements that are added by the user (when they click a button), it adds ap 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 ap 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 ap 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.

Answer 1

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>