使用 javascript 将元素文本替换为另一个文本
Replace an element text with another text using javascript
编辑:(下)
我有一个包含此模板的网络应用程序,该模板使用服务器返回的书籍呈现书籍数量,该服务器使用 python(flask) 书籍标题、IDS 和作者姓名全部实现其中一些在变量“books”中,正如您在此处看到的那样,我循环打印所有这些内容。我还为用户提供了对书籍进行评分的能力,但是当用户对我发送 ajax 请求的书籍进行评分时,我只会返回刚刚获得评分的书籍的评分。我正在尝试将每个费率附加到它的书中,我的代码中的问题是用户试图再次对新费率进行评分,将新费率与旧费率连接起来(即,如果旧费率是 3,而用户再次对这本书的费率为 4率将为 34)。
我尝试使用 replaceWith 但 8 未定义。
这里是 javascript 代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="row g-3">
<!--render the books in within cards-->
{% for book in books %}
<div class="col-12 col-md-6 col-lg-4">
<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>
我在这里找到了答案
我所要做的就是将 $rated.append 更改为 $rated.innerText=r.rate;
编辑:(下)
我有一个包含此模板的网络应用程序,该模板使用服务器返回的书籍呈现书籍数量,该服务器使用 python(flask) 书籍标题、IDS 和作者姓名全部实现其中一些在变量“books”中,正如您在此处看到的那样,我循环打印所有这些内容。我还为用户提供了对书籍进行评分的能力,但是当用户对我发送 ajax 请求的书籍进行评分时,我只会返回刚刚获得评分的书籍的评分。我正在尝试将每个费率附加到它的书中,我的代码中的问题是用户试图再次对新费率进行评分,将新费率与旧费率连接起来(即,如果旧费率是 3,而用户再次对这本书的费率为 4率将为 34)。 我尝试使用 replaceWith 但 8 未定义。
这里是 javascript 代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="row g-3">
<!--render the books in within cards-->
{% for book in books %}
<div class="col-12 col-md-6 col-lg-4">
<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>
我在这里找到了答案
我所要做的就是将 $rated.append 更改为 $rated.innerText=r.rate;