我有一個包含此模板的 Web 應用程式，該模板使用從服務器回傳的書籍呈現許多書籍，該書籍是使用 python(flask) 實作的，書籍的標題、IDS 和作者姓名所有這些都在變數中“書籍”，正如您在此處看到的那樣，我回圈列印所有這些。我還讓用戶能夠對書籍進行評分，但是當用戶對我正在發送 ajax 請求的書籍進行評分時，我只會回傳剛剛被評分的書籍的評分。我正在嘗試將每個費率附加到它的書上，我的代碼中的問題是，如果用戶嘗試再次對新費率進行評分，則新費率與舊費率連接（即，如果舊費率為 3，而用戶再次以 4 費率書的費率為 34）。我嘗試使用 replaceWith 但 8 未定義。
這是javascript代碼：
<script>
jQuery(function ($) {
$(".book-rating").on("change", function (event) {
const $target = $(event.target);
const rating = $target.val(); // value of select.
const bookId = $target.next().val(); // value of input
// console.log(bookId);
// console.log($(this).attr('book-rating'));
var $rated = this.form.querySelector(".rated");
$.ajax({
url: /rate/${bookId}/${rating},
success: function(all_rates){
console.log('success', all_rates);
$.each(all_rates, function(i, r){
// if(this.form.querySelector(".rated")
$rated.append(r.rate);
});
}
});
});
});
</script>
這是HTML
<div
style="background-color:#6e6b64" class="card">
{% if book.volumeInfo.imageLinks.smallThumbnail %}
<img src="{{book.volumeInfo.imageLinks.smallThumbnail}}">
{% endif %}
<div class="card-body">
<h5 style="color:red" class="card-title">{{book.volumeInfo.title}}</h5>
<p style="color:blue" class="card-text">{{book.volumeInfo.authors}}</p>
<form style="margin-bottom:5px" action="/addcomment" method="get">
<h4 class="rated"></h4>
<input name="book" type ="hidden" class="form-control mx-auto w-auto" id="book_id" class="book_id" value="{{book.id}}" type="text">
<a href="{{book.volumeInfo.infoLink}}" class="btn btn-primary">More Info</a>
<button type="submit" class="btn btn-primary">add comment</button>
<!--get the user rate-->
<label class="custom-select">
Give your rate
<select class="book-rating custom-select" style="width:200px;" >
<option value="">rate</option>
<option value="1">1</option>
<option value="2">2</option> <option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="book" type="hidden" class="book-id form-control mx-auto w-auto" value="{{book.id}}" type="text">
</label>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
uj5u.com熱心網友回復：
如 MDN 所述，在元素上呼叫.append將在元素的最后一個子元素之后插入“一組 Node 物件或 DOMString 物件”
如果您想替換內容，請嘗試使用.innerText（用于純文本內容）或.innerHTML（如果您需要包含標記）
因此，您的代碼將更改為：
...
$rated.innerText = r.rate;
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/461033.html
標籤：javascript html jQuery 阿贾克斯
上一篇：PHPAjax僅在第一行加載