我现在正在研究评级系统。我正在尝试使用 select 标签来实现这个系统。因此，当用户选择任何费率时，他们会被重定向到其他路线。现在，我正在动态创建 html 页面。并且有多个书的ID具有相同的类（即class =“book_id”）。我的代码现在将我重定向到另一条路线，但“book_name”的值应该是用户评价它的书的 id 未定义
<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">
<!--<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>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/fontawesome-stars-o.css" rel="stylesheet"/>
<!--get the user rate-->
<label class="custom-select">
Give your rate
<select class="custom-select" style="width:200px;" id="example">
<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="form-control mx-auto w-auto" id="book_id" class="book_id" value="{{book.id}}" type="text">
</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
jQuery(function(){
jQuery('[id=example]').on('change', function (event) {
let book_name =event.target.nextSibling.value;
// let book_name =event.target.closest('.book_id').value;
// name = book_name.closest('.book_id').value
console.log(book_name);
var rating = $(this).val(); // get selected value
if (rating ) {
window.location = "/rate/"+book_name+"/" +rating;
}
return false;
});
});
</script>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
页面上的所有 id 都应该是唯一的。目前，您对每个和元素具有相同的id值。丢失这些 ID。selectinput
相反，给元素 aclass一个有意义的名字。喜欢book-ratingselect 和book-idhidden input。
<select class="book-rating custom-select">
<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">
通过选择该类的所有 元素并侦听更改事件来修改 JS 。select.book-rating
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.
if (rating && bookId) {
window.location = `/rate/${bookId}/${rating}`;
}
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句