javascript - JQuery 仅显示某些 id Div

Question

我有一个显示 div 的 jquery 函数，当单击带有 id 切换_（某个唯一数字）的锚标记时。

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

1. 每个 idtoggle并"replypost以每个 id 的 `_(unique number) 结尾，因此我可以将所有切换和回复 div 分开。

2. 切换和回复帖子 div 通过 while() 循环显示。因此有 multipeToggle和replypostdiv，但它们每个都有唯一的编号。

3. 所以有 atoggle_1和 a ReplyPost_1。

我需要一种仅在单击时才显示的方法，ReplyPost_1并且Toggle_1仅ReplyPost_2在单击时才显示Toggle_2 ，这可能吗？如果您需要我澄清任何事情，请告诉我并感谢您的时间。

Answer 1

仅显示具有匹配数字的帖子并隐藏其他帖子。

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

Answer 2

我认为这应该可以解决问题：

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

Answer 3

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

Answer 4

您可以使用类来使这更清洁，并消除循环。

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