具有相同类别的多个切换按钮

我正在编写一个简单的博客，我试图实现的功能之一是每篇文章的评论/回复部分。在我的文章视图中，我有一个foreach循环，打印该帖子的所有评论。具有相同类别的多个切换按钮

@foreach (var comments in Model.Post.Comments) 
{ 
if (comments.ReplyToId == 0) 
{ 
    <p>@comments.Body <span><a href="#" class="toggleReply">Reply</a></span></p> 

    <div id="replyTextBox" style="display:none"> 
     @using (Html.BeginForm("Reply", "Comment", FormMethod.Post)) 
     { 
      <input type="hidden" name="PostId" value="@Model.Post.PostId" /> 
      <input type="hidden" name="CommentId" value="@comments.CommentId" /> 
      <input type="text" name="Body" id="CommentBody" /> 
      <input type="submit" value="Submit" /> 
     } 
    </div> 
} 

foreach (var reply in Model.Post.Comments) 
{ 
    if(reply.ReplyToId == comments.CommentId) 
    { 
     <ul> 
      <li>@reply.Body</li> 
     </ul>  
    } 
} 
}

我有一个if语句来检查数据库以查看注释是新评论还是评论回复。每个新评论都包含一个回复按钮，以允许用户回复评论。我添加了一些jquery到这个按钮来隐藏或显示回复文本框。

这里是jQuery代码：

@section scripts { 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.toggleReply').click(function() { 
      $('#replyTextBox').toggle(); 
     }); 
    }); 
</script> 
}

我遇到的问题是，由于这些答复文本框的动态性质，只有第一个按钮似乎透露出一个文本框。当我点击其他前面的回复按钮时，只有第一个回复按钮的文本框会受到影响。

道歉为简洁的解释。

来源

2013-05-09 gb1986

'id =“replyTextBox”'...重复的ID ....！ – 2013-05-09 20:24:53

'CommentBody'也是一个重复的ID – 2013-05-09 20:26:13

@MohammadAdil，是什么让你觉得它是重复的？ – 2013-05-09 20:28:34

使用.on()代替：

<script type="text/javascript"> 
    $(document).on('click', '.toggleReply', function() { 
     $('#replyTextBox').toggle(); 
    }); 
</script>

这将订阅选择（#toggleReply），即使在DOM最初加载，但随后添加它们不存在匹配所有的DOM元素的单击事件。出于这个原因，您不需要将代码封装在$(document).ready()中，如我的代码示例所示。

还要注意的是，你可能最终在这里重复的ID导致无效DOM：

<input type="text" name="Body" id="CommentBody" />

同样的，#replyTextBox。

您可能需要解决这个问题：

@foreach (var comments in Model.Post.Comments) 
{ 
    if (comments.ReplyToId == 0) 
    { 
     <p>@comments.Body <span><a href="#" class="toggleReply">Reply</a></span></p> 

     <div class="replyTextBox" style="display:none"> 
      @using (Html.BeginForm("Reply", "Comment", FormMethod.Post)) 
      { 
       <input type="hidden" name="PostId" value="@Model.Post.PostId" /> 
       <input type="hidden" name="CommentId" value="@comments.CommentId" /> 
       <input type="text" name="Body" /> 
       <input type="submit" value="Submit" /> 
      } 
     </div> 
    } 

    foreach (var reply in Model.Post.Comments) 
    { 
     if (reply.ReplyToId == comments.CommentId) 
     { 
      <ul> 
       <li>@reply.Body</li> 
      </ul>  
     } 
    } 
}

，并做出相应的调整，当然你的脚本：

<script type="text/javascript"> 
    $(document).on('click', '.toggleReply', function() { 
     $(this).next('.replyTextBox').toggle(); 
    }); 
</script>

来源

2013-05-09 20:24:09

感谢@Darin的快速回复，我提出了一些建议，但是，如果单击回复按钮，则会显示所有文本框。这是因为它们共享相同的类，如果是这样，那么为随机生成的按钮创建唯一类的最佳方法是什么？ – gb1986 2013-05-09 20:34:52

查看我的更新答案。修复你的dupe id。并使用类选择器：'$（this）.next（'。replyTextBox'）。toggle（）;'匹配要切换的相应元素。 – 2013-05-09 20:35:47

对不起@Darin，我没有看到其他信息。感谢你的帮助。 – gb1986 2013-05-09 20:36:10

看起来你可以用id #replyTextBox页面上的多个元素。 jQuery select by id只返回一个元素，在这里是第一个元素。您可能应该使您的replyTextBox类，而不是选择最接近此点击切换回复按钮：

$(document).ready(function() { 
    $('.toggleReply').click(function() { 
     $(this).closest('.replyTextBox').toggle(); 
    }); 
});

来源

2013-05-09 20:34:44 bbird

具有相同类别的多个切换按钮

回答

相关问题