Question

我有一个jquery函数，当点击一个id为toggle_（某个唯一编号）的锚标记时，它会显示一个div。

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

每个id toggle和"replypost都以`_（唯一编号）结尾，因此我可以分隔所有的toggle和replypost div。
切换和回复帖子div通过a显示 while（）loop.So有多个Toggle和replypost div，但每个div都有一个唯一的数字。
所以有一个toggle_1和一个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();
});

JQuery只显示某个id Div

4 个答案: