javascript - 特定のIDDivのみを表示するJQuery

Question

IDtoggle_（いくつかの一意の番号）を持つアンカータグがクリックされたときにdivを表示するjquery関数があります。

    $("a[id ^= 'toggle']").click(function(event){
        event.preventDefault();
        $("div [id ^= 'replypost']").toggle();
    });

各IDは、各IDの`_（一意の番号）toggleで"replypost終わるため、すべてのトグルと返信ポストのdivを区切ることができます。
トグルと返信の投稿divはwhile（）ループを介して表示されるため、multipeToggleとdivがありreplypostますが、それぞれに一意の番号があります。
したがって、toggle_1とがありReplyPost_1ます。

ReplyPost_1クリックしたときToggle_1とクリックしたReplyPost_2ときだけ表示する方法が必要ですToggle_2 が、可能ですか？あなたが私に何かを片付ける必要があるならば、ただ私に知らせて、あなたの時間をありがとう。

score 1 · Accepted Answer

数値が一致する投稿のみを表示し、他の投稿を非表示にします。

$("a[id^='toggle']").click(function(event){
    event.preventDefault();
    $("[id^='replypost']").hide();
    $("#replypost_" + this.id.replace('toggle_', '') ).show();
});

しかし、投稿が兄弟である場合、これを書くことは少なくなります：

$("a[id^='toggle']").click(function(event){
    event.preventDefault();
    $("#replypost_" + this.id.replace('toggle_', '') ).show().siblings().hide();
});

score 1 · Accepted Answer

私はこれがトリックを行うべきだと思います：

$("a[id ^= 'toggle']").click(function(event){
    event.preventDefault();
    $("div [id='replypost_"+$(this).attr('id').replace('toggle_','')+"']").show();
});

score 1 · Accepted Answer

$("a[id^='toggle']").click(function(event){
  event.preventDefault();
  // grab the index of the clicked element from it's ID
  var index = $(this).attr('id').match(/\d+$/)[0]
  // identify the thing to toggle uniquely, based on the grabbed index
  $("div#replypost_"+index).toggle();
});

score 1 · Accepted Answer

クラスを使用して、これをかなりクリーンにし、ループを排除することができます。

<a id="toggle_1" class="toggle" />
<div id="replyPost_1" class="reply-post" />

これで、すべてのトグルアンカーでクリックイベントをリッスンし、IDから番号を取得し、すべての返信divを非表示にして、一致する返信投稿のみを表示できます。

$(".toggle").click(function(e) {
  var num = $(this).attr("id").split("_")[1];
  $(".reply-post").hide();
  $("replyPost_"+num).show();
});

javascript - 特定のIDDivのみを表示するJQuery

4 に答える 4

Related

Reference