我目前正在學習編程并嘗試使用.Net Core 構建一個網(wǎng)站。我有以下問題。我對 JavaScript 不太熟悉，并且我的索引頁面上有兩個 JQuery/AJAX 函數(shù)。其中一個功能是帖子喜歡/不喜歡，另一個功能是帖子評論。我的 ViewModel 包含一系列帖子： public IEnumerable<IndexPostViewModel> Posts { get; set; } public int PagesCount { get; set; } public int CurrentPage { get; set; }在我看來，我正在循環(huán)瀏覽每一篇文章以及其中的每一條評論。@foreach (var post in Model.Posts) { <div class="post-content"> <img src=@post.ImageUrl width="500" height="500" alt="post-image" class="img-responsive post-image" /> <div class="post-container"> <img src="http://placehold.it/300x300" alt="user" class="profile-photo-md pull-left" /> <div class="post-detail"> <div class="user-info"> <h5><a href="timeline.html" class="profile-link">@post.User.UserName</a> <span class="following">following</span></h5> <p class="text-muted">Post published at: @post.CreatedOn</p> </div> <div class="reaction"> <a class="btn text-green" href="#" method="post" onclick="sendVote(@post.Id, true)"><div class="icon ion-thumbsup" id="upVotes">@post.UpVotes</div></a> <a class="btn text-red" href="#" method="post" onclick="sendVote(@post.Id, false)"><div class="fa fa-thumbs-down" id="downVotes">@post.DownVotes</div></a> </div> <div class="line-divider"></div> <div class="post-text"> <p>@post.Text</p> </div> <div class="line-divider"></div>我的問題是，這兩個功能僅在第一篇文章中才能正常工作。您能否協(xié)助了解如何修改要應用于循環(huán)中每個元素的函數(shù)？
1 回答
Smart貓小萌
TA貢獻1911條經(jīng)驗 獲得超7個贊
問題很簡單。你的選擇器和 id 不是唯一的
id 只能為一個元素定義，多個/相同元素上的相同 id 會導致此問題。
鏈接標簽對所有記錄都有一個共同的 ID，它必須是唯一的。
使 ids 唯一，我添加了 @post.Id 和 ids，這將使每個都唯一
<div class="reaction">
<a class="btn text-green" href="#" method="post" onclick="sendVote(@post.Id, true)"><div class="icon ion-thumbsup" id="upVotes_@post.Id">@post.UpVotes</div></a>
<a class="btn text-red" href="#" method="post" onclick="sendVote(@post.Id, false)"><div class="fa fa-thumbs-down" id="downVotes_@post.Id">@post.DownVotes</div></a>
</div>
在你的js中通過添加id來更改選擇器
function sendVote(postId, isUpVote) {
var json = { postId: postId, isUpVote: isUpVote };
$.ajax({
url: "/api/votes",
type: "POST",
data: JSON.stringify(json),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#upVotes_"+postId).html(data.upVotes); // change here
$("#downVotes_"+postId).html(data.downVotes);
}
});
}
并且對于 myform 也做同樣的事情，您不需要表單的 id，但如果您只想將 @post.Id 添加到 id，
<form id="myForm" class="myform" asp-controller="Comment" asp-action="Create" method="post">
<input type="hidden" name="PostId" id="postId" value="@post.Id" />
<textarea name="text"></textarea>
<input type="submit" value="Submit Comment" />
</form>
如果將 id 更改為 class 以使其動態(tài)，
$('.myForm').each.ajaxForm(function () {
// $(this) will give you access to the specific form only
alert("You have just posted a comment");
document.location.reload(true);
});
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消