問題評級爲

Question

在使用jquery ui單選按鈕創建評級代碼時遇到了問題。它將集成到內容管理中，所以我不想使用ID和限制編碼限制。我通過使用數組完成了90％的工作，但是當我從底部到頂部選擇其工作不正常時。任何人都可以提供幫助。 感謝

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("div.rating").buttonset(); 
 
    $("div.rating").find("input[type=radio]").bind('click', function(event) {  
 
     var currentval = $(this).val(); 
 
     var currentKey = $(this).attr("id");  
 
     var len = $(".rating").find("input[type=radio]:checked").length; 
 
     var array = []; 
 
     var arrayKeys = []; 
 
     $("div.rating").find("input[type=radio]:checked").each(function(index) { 
 
      var key = $(this).attr("id"); 
 
      array[index] = $(this).val(); 
 
      arrayKeys[index] = key;   
 
       }); 
 
      if($("div.rating").find("input[type=radio]:checked").length > 1) { 
 
      for(var i = 0; i<array.length-1; i++){ 
 
       if(currentval == array[i]){ 
 
        if(arrayKeys[i] != currentKey){ 
 
         $(this).parent().find('label').removeClass('ui-state-active'); 
 
       $('.error').text('You have already chossen rating ' + currentval).show(); 
 
       return false; 
 
        } 
 
        
 
       } 
 
       else 
 
       { 
 
        $('.error').hide(); 
 
       } 
 
      } 
 
     } 
 
    }); 
 
}); 
 
</script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<div class="rating"> 
 
    <input type="radio" id="ss01" name="ss" value="1"> 
 
    <label for="ss01">1</label> 
 
    <input type="radio" id="ss02" name="ss" value="2"> 
 
    <label for="ss02">2</label> 
 
    <input type="radio" id="ss03" name="ss" value="3"> 
 
    <label for="ss03">3</label> 
 
    <input type="radio" id="ss04" name="ss" value="4"> 
 
    <label for="ss04">4</label> 
 
    <input type="radio" id="ss05" name="ss" value="5"> 
 
    <label for="ss05">5</label> 
 
    <input type="radio" id="ss06" name="ss" value="6"> 
 
    <label for="ss06">6</label> 
 
</div> 
 
<br /> 
 
<div class="rating"> 
 
    <input type="radio" id="sobv01" name="sobv" value="1"> 
 
    <label for="sobv01">1</label> 
 
    <input type="radio" id="sobv02" name="sobv" value="2"> 
 
    <label for="sobv02">2</label> 
 
    <input type="radio" id="sobv03" name="sobv" value="3"> 
 
    <label for="sobv03">3</label> 
 
    <input type="radio" id="sobv04" name="sobv" value="4"> 
 
    <label for="sobv04">4</label> 
 
    <input type="radio" id="sobv05" name="sobv" value="5"> 
 
    <label for="sobv05">5</label> 
 
    <input type="radio" id="sobv06" name="sobv" value="6"> 
 
    <label for="sobv06">6</label> 
 
</div> 
 
<br /> 
 
<div class="rating"> 
 
    <input type="radio" id="scs01" name="scs" value="1"> 
 
    <label for="scs01">1</label> 
 
    <input type="radio" id="scs02" name="scs" value="2"> 
 
    <label for="scs02">2</label> 
 
    <input type="radio" id="scs03" name="scs" value="3"> 
 
    <label for="scs03">3</label> 
 
    <input type="radio" id="scs04" name="scs" value="4"> 
 
    <label for="scs04">4</label> 
 
    <input type="radio" id="scs05" name="scs" value="5"> 
 
    <label for="scs05">5</label> 
 
    <input type="radio" id="scs06" name="scs" value="6"> 
 
    <label for="scs06">6</label> 
 
</div> 
 
<br /> 
 
<div class="rating"> 
 
    <input type="radio" id="roc01" name="roc" value="1"> 
 
    <label for="roc01">1</label> 
 
    <input type="radio" id="roc02" name="roc" value="2"> 
 
    <label for="roc02">2</label> 
 
    <input type="radio" id="roc03" name="roc" value="3"> 
 
    <label for="roc03">3</label> 
 
    <input type="radio" id="roc04" name="roc" value="4"> 
 
    <label for="roc04">4</label> 
 
    <input type="radio" id="roc05" name="roc" value="5"> 
 
    <label for="roc05">5</label> 
 
    <input type="radio" id="roc06" name="roc" value="6"> 
 
    <label for="roc06">6</label> 
 
</div> 
 
<br /> 
 
<div class="rating"> 
 
    <input type="radio" id="icl01" name="icl" value="1"> 
 
    <label for="icl01">1</label> 
 
    <input type="radio" id="icl02" name="icl" value="2"> 
 
    <label for="icl02">2</label> 
 
    <input type="radio" id="icl03" name="icl" value="3"> 
 
    <label for="icl03">3</label> 
 
    <input type="radio" id="icl04" name="icl" value="4"> 
 
    <label for="icl04">4</label> 
 
    <input type="radio" id="icl05" name="icl" value="5"> 
 
    <label for="icl05">5</label> 
 
    <input type="radio" id="icl06" name="icl" value="6"> 
 
    <label for="icl06">6</label> 
 
</div> 
 
<br /> 
 
<div class="rating"> 
 
    <input type="radio" id="nlg01" name="nlg" value="1"> 
 
    <label for="nlg01">1</label> 
 
    <input type="radio" id="nlg02" name="nlg" value="2"> 
 
    <label for="nlg02">2</label> 
 
    <input type="radio" id="nlg03" name="nlg" value="3"> 
 
    <label for="nlg03">3</label> 
 
    <input type="radio" id="nlg04" name="nlg" value="4"> 
 
    <label for="nlg04">4</label> 
 
    <input type="radio" id="nlg05" name="nlg" value="5"> 
 
    <label for="nlg05">5</label> 
 
    <input type="radio" id="nlg06" name="nlg" value="6"> 
 
    <label for="nlg06">6</label> 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="error"></div>

Answer 1

我懷疑的問題是，你是基於id兌name創建數組。您的代碼應該使用name作爲您的密鑰更好地工作。我覺得使用對象會更好。

工作實例：https://jsfiddle.net/Twisty/ma1k1z2L/3/

jQuery的

$(document).ready(function() { 
    // Create object to store selected values 
    var selected = {}; 
    // Populate keys to initialize the object 
    $(".rating input[type='radio']").each(function() { 
    selected[$(this).attr("name")] = null; 
    }); 
    $(".rating").buttonset(); 
    $(".rating input[type='radio']").on('click', function() { 
    // Hide any previous errors 
    $(".error").text("").hide(); 
    // Collect current index and value from selection 
    var ci = $(this).attr("name"); 
    var cv = parseInt($(this).val()); 
    // Update the object 
    selected[ci] = cv; 
    // Check all elements of the object to see if this value already exists 
    $.each(selected, function(key, val) { 
     // Skip current index 
     if (key != ci) { 
     if (val == cv) { 
      // We have a match, remove currently selected and present error 
      // Unhighlight selected 
      $(this).parent().find('label').removeClass('ui-state-active'); 
      // Reset value 
      selected[ci] = null; 
      // Show error 
      $('.error').text('You have already choosen rating ' + cv).show(); 
     } else { 
      // Do nothing 
     } 
     } 
    }); 
    return false; 
    }); 
}); 

跳繩我們只是選擇了一個，我們檢查的所有其他元素，看看是否能值已經被選定。因此，如果用戶從第一個或最後一個或中間的某個地方開始，那麼他們接下來選擇什麼都不重要，它將檢查整組選定元素以確保它們沒有選擇相同的值。