我的jQuery函式有什么問題？嘗試使用按鈕進行評分-有解無憂

在這里，我有我的 jQuery 函式來選擇按鈕，如果我只是將一個函式與選擇結合使用（注釋第 1 部分 - 第 1 部分結束），我的代碼效果很好。

但結合第二個函式/html 第 2 部分，我的代碼不再正常作業！

錯誤在哪里？

在這里您可以看到問題，我可以在第一行中選擇，但是當我想在第二行中選擇另一個值時，第一行中的選擇被取消選擇/禁用。

總之，我只能在一行中選擇一個值

我的 jQuery 函式有什么問題？嘗試使用按鈕進行評分

<script> 
    jQuery(document).ready(function($){
        
      $(".btnrating").on('click',(function(e) {
      
      var previous_value = $("#selected_rating").val();
      
      var selected_value = $(this).attr("data-attr");
      $("#selected_rating").val(selected_value);
      
      $(".selected-rating").empty();
      $(".selected-rating").html(selected_value);
      
      for (i = 1; i <= selected_value;   i) {
      $("#rating-star-" i).toggleClass('btn-warning');
      $("#rating-star-" i).toggleClass('btn-default');
      }
      
      for (ix = 1; ix <= previous_value;   ix) {
      $("#rating-star-" ix).toggleClass('btn-warning');
      $("#rating-star-" ix).toggleClass('btn-default');
      }
      }));
    });

    
    jQuery(document).ready(function($){

   $(".btnrating").on('click',(function(f) {
      
    var previous_value = $("#selected_heart").val();
      
    var selected_value = $(this).attr("data-heart");
    $("#selected_heart").val(selected_value);
      
    $(".selected-heart").empty();
    $(".selected-heart").html(selected_value);
      
    for (i = 1; i <= selected_value;   i) {
    $("#rating-heart-" i).toggleClass('btn-warning');
    $("#rating-heart-" i).toggleClass('btn-default');
    }
      
    for (ix = 1; ix <= previous_value;   ix) {
    $("#rating-heart-" ix).toggleClass('btn-warning');
    $("#rating-heart-" ix).toggleClass('btn-default');
    }
      
    }));
    });
</script>

這是我的 HTML：第 1 部分單獨運行良好。

<!-- Part 1 Start -->
<div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>How did you like the food?</h4>
        </h2>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="5" id="rating-star-5">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
      <span class="selected-rating">0</span><small> / 5</small>
    </div>
  <!-- Part 1 End -->


  <!-- Part 2 Start -->
  <div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_heart" name="selected_heart" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>how satisfied were you with the food?</h4>
        </h2>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="1" id="rating-heart-1">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="2" id="rating-heart-2">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="3" id="rating-heart-3">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="4" id="rating-heart-4">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-heart="5" id="rating-heart-5">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
      <span class="selected-heart">0</span><small> / 5</small>
    </div>
  <!-- Part 2 End -->

uj5u.com熱心網友回復：

你的心率按鈕有一個.btnrating應該在什么時候出現的類.btnheart。

jQuery(document).ready()當只需要一個時，您還接到了兩個電話。

這段代碼現在應該可以作業了：

jQuery(document).ready(function($){
    $(".btnrating").on('click',function(e) {
        var previous_value = $("#selected_rating").val();
        var selected_value = $(this).attr("data-attr");
        $("#selected_rating").val(selected_value);
      
        $(".selected-rating").empty();
        $(".selected-rating").html(selected_value);
      
        for (i = 1; i <= selected_value;   i) {
            $("#rating-star-" i).toggleClass('btn-warning');
            $("#rating-star-" i).toggleClass('btn-default');
        }
      
        for (ix = 1; ix <= previous_value;   ix) {
            $("#rating-star-" ix).toggleClass('btn-warning');
            $("#rating-star-" ix).toggleClass('btn-default');
        }
    });

    $(".btnheart").on('click',function(f) {
        var previous_value = $("#selected_heart").val();
      
        var selected_value = $(this).attr("data-heart");
        $("#selected_heart").val(selected_value);
      
        $(".selected-heart").empty();
        $(".selected-heart").html(selected_value);
      
        for (i = 1; i <= selected_value;   i) {
            $("#rating-heart-" i).toggleClass('btn-warning');
            $("#rating-heart-" i).toggleClass('btn-default');
        }
      
        for (ix = 1; ix <= previous_value;   ix) {
            $("#rating-heart-" ix).toggleClass('btn-warning');
            $("#rating-heart-" ix).toggleClass('btn-default');
        }
    }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Part 1 Start -->
<div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_rating" name="selected_rating" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>How did you like the food?</h4>
        </h2>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="1" id="rating-star-1">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="2" id="rating-star-2">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="3" id="rating-star-3">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="4" id="rating-star-4">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="5" id="rating-star-5">
            <i class="fa fa-star" aria-hidden="true"></i>
        </button>
      <span class="selected-rating">0</span><small> / 5</small>
    </div>
  <!-- Part 1 End -->


  <!-- Part 2 Start -->
  <div class="form-group" id="rating-ability-wrapper">
        <label class="control-label" for="rating">
        <input type="hidden" id="selected_heart" name="selected_heart" value="" required="required">
        </label>
        <h2 class="bold rating-header" style="">
        <h4>how satisfied were you with the food?</h4>
        </h2>
        <button type="button" class="btnheart btn btn-default btn-lg" data-heart="1" id="rating-heart-1">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnheart btn btn-default btn-lg" data-heart="2" id="rating-heart-2">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnheart btn btn-default btn-lg" data-heart="3" id="rating-heart-3">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnheart btn btn-default btn-lg" data-heart="4" id="rating-heart-4">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
        <button type="button" class="btnheart btn btn-default btn-lg" data-heart="5" id="rating-heart-5">
            <i class="fa fa-heart" aria-hidden="true"></i>
        </button>
      <span class="selected-heart">0</span><small> / 5</small>
    </div>
  <!-- Part 2 End -->

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439724.html

標籤：html jQuery

上一篇：將PHP陣列從AJAX回應轉換為Javascript物件

下一篇：路口觀察者僅適用于第一個視頻