jqueryでオブジェクトのクラスを切り替える

Question

ユーザーが（ボタンをクリックすると）追加される要素があり、p要素とpre要素が追加されます。 p要素が "query-p"のクラスを持つ間、pre要素は不可視であり、クラスを持たない。

私がしようとしているのは、ユーザーが "data-id = 'p1'"を持つap要素をクリックするたびに、 "data-id"を持つpre要素に "show" = 'pre1' "または例えば" data-id = 'p2' "でap要素をクリックすると、" data-id = 'pre2' "というようにpre要素に" show "クラスを追加します。 （それが役立つかもしれないので、私はここにそれを置く私が働いている要素は、このコードではありません）これは私のHTMLで

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

：

は、これは私のjqueryのコードであるhttps://pastebin.com/eKVbUZHQ

これは私の他のjavascriptファイル（主に私が使用している要素を追加するコードを含んでいます）：https://pastebin.com/yEZuuhA8

問題は私のコードは、それは。

例：

p要素1：ID = "ディスプレイPRE1" クラス= "クエリP" データID = "P1" プレ素子1：ID =
私は新しい要素を追加しました"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要素にはクラスがありません。

最初のp要素をクリックするたびに、pre要素1とpre要素2の両方にクラス「show」が追加されるため、クリックすると「display： 'block'」になりますもう一度前の要素の両方を隠す。

これは少し役に立ちます。

Answer 1

クリックハンドラ内での問題のいくつか：$("p[data-id]")で

• だけクリックされたものを選択する必要がありながら、あなたは、data-id属性を持つすべてのp要素を選択します。あなただけのその属性の特定の値に1を選択する必要がありながら、あなたは、data-id属性を持つすべてのpre要素を選択$("pre[data-id]")で
• 。
• クラス属性を"query-p"と比較しますが、この条件をクリックハンドラのみが定義されているようにしてください。その後、ユーザーがクリックした後でこれをもうチェックする必要はありません。
• attr("class")とremoveAttr("class")のコードは、要素が最大で1つの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>