用 DOM 中的另一个文本替换元素文本

Question

我有一个包含此模板的 Web 应用程序，该模板使用从服务器返回的书籍呈现大量书籍，服务器使用 python(flask) 书籍标题、IDS 和作者的实现所有这些的名称都在变量“books”中，正如您在此处看到的那样，我循环打印所有这些。我还为用户提供了对书籍进行评分的能力，但是当用户对一本书进行评分时，我发送了一个 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>

Answer 1

如 MDN 所述，在元素上调用 .append 将插入“元素的最后一个子元素之后的一组 Node 对象或 DOMString 对象”

如果您想替换内容，请尝试使用 .innerText (for text-only content) or .innerHTML（如果您需要包含标记）

因此您的代码将更改为：

...
$rated.innerText = r.rate;
...

用 DOM 中的另一个文本替换元素文本

Replace an element text with another text from DOM

html

javascript

ajax

jquery