评分问题 [英] Issue with rating

问题描述

在使用jQuery ui单选按钮集创建评级代码时遇到问题.它要集成到内容管理中，所以我不想使用id并限制编码限制.我已经通过使用数组完成了90％的工作，但是当我从下到上进行选择时，它无法正常工作.任何人都可以帮上忙. 谢谢

am facing issue in creating rating code with jquery ui radio buttonset. its going to integrated in content management so i don't want to use ids and restrict coding limitations. I have done 90% of the job by using array but when i select from bottom to top its not working properly. can anyone help on this. Thanks

<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>

推荐答案

我怀疑问题是您正在基于id和name创建数组.使用name作为键，您的代码应该可以更好地工作.我觉得最好使用Object.

I suspect the issue is that you are creating arrays based on the id versus the name. Your code should work better using name as your keys. I felt it would be better off using an Object.

工作示例: 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;
  });
});

跳过刚才选择的那个，我们检查所有其他元素以查看是否已经选择了该值.因此，如果用户从第一个，最后一个或中间的某个地方开始，那么接下来选择什么都没有关系，它将检查整个选定元素组，以确保他们没有选择相同的值.

Skipping the one we just selected, we check all the other elements to see if that value has already been selected. So if the user starts with the first or the last or somewhere in the middle, it will not matter what they select next, it checks the whole group of selected elements to ensure that they have not selected the same value.

这篇关于评分问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！