ハイパーリンクをクリックするとDOM要素が表示されます

Question

jQueryを効果的に使用する方法を学習していますが、ここでは最小限のコードで問題が発生しています。

$(".showHideLink").on("click", function() { 
var id = $(this).attr("id"); 
$("."+id+" comments").show(); 
}); 

理想的には、これは、クラス「ID」&「コメント」ショーを持つ要素になるだろう。これは評価フォームの一部で、適格な値を必要とする約60種類の項目がありますが、定量化情報はオプションですので、評価者が有効にしない限りtextareaを非表示にしました。

エラーが連結されているかどうか、またはマークが完全に欠落しているかどうかはわかりません。

もし私のエラーが発生している場所であるかどうかを確認するための参考リンクがあります。

<p class="showHide"><a class="showHideLink" id="1" href="#">Enter Comments</a></p> 

ここに私が「表示」しようとしている要素があります。

<p class="1 comments">Comments:<br><textarea cols="50" rows="3"></textarea></p> 

私は少し探してきましたが、私のニーズに合った答えで他の質問を見つけることができませんでした。ご協力いただきありがとうございます。

Answer 1

セレクタに基づいて<comment>要素を選択しています。クラス1とのクラスがcommentsのクラス（.1.comments）を選択する必要があるため、代わりに$("." + id + ".comments")を使用する必要があります。

$(".showHideLink").on("click", function() { 
 
    var id = $(this).attr("id"); 
 
    $("." + id + ".comments").show(); 
 
});

.comments { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="showHide"><a class="showHideLink" id="1" href="#">Enter Comments</a></p> 
 
<p class="1 comments">Comments:<br><textarea cols="50" rows="3"></textarea></p>