具有相同類別的多個切換按鈕

我正在編寫一個簡單的博客，我試圖實現的功能之一是每篇文章的評論/回覆部分。在我的文章視圖中，我有一個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

具有相同類別的多個切換按鈕

回答

相關問題