在使用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>
答案 0 :(得分：0)
我怀疑问题是您正在根据id与name创建数组。使用name作为密钥，您的代码应该可以更好地运行。我觉得使用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;
});
});
跳过我们刚刚选择的那个，我们检查所有其他元素以查看是否已经选择了该值。因此，如果用户从第一个或最后一个或中间某个地方开始，接下来选择的内容无关紧要，它会检查整个选定元素组，以确保它们没有选择相同的值。