我希望能够在html中显示一条消息,其中两个动态值通过switch语句声明为变量。
当在每种情况下单独调用这些值时,switch语句显示带有两个值的消息,但是当我在第二种情况下将它们全部放在一起时,第一个值返回undefined。
我需要两个变量在最后一个案例中都有它们的值,所以我可以把它们放在同一个html元素中,而不是现在就发生在两个元素中。
HTML code:
<fieldset>
<legend>GROUP A:</legend>
<div class="check-fieldset fieldset-group-1">
<input type="checkbox" name="country" value="BRAZIL" class="group1" id="BRA" />
<label for="BRA">BRAZIL </label>
<br />
<input type="checkbox" name="country" value="CROATIA" class="group1" id="CRO" />
<label for="CRO">CROATIA </label>
<br />
<input type="checkbox" name="country" value="MEXICO" class="group1" id="MEX" />
<label for="MEX">MEXICO </label>
<br />
<input type="checkbox" name="country" value="CAMERUN" class="group1" id="CMR" />
<label for="CMR">CAMERUN </label>
<br />
<div class="alert-group-1"></div>
<div class="alert-group-1b"></div>
<div class="alert-group-all" style="color:red"></div>
</div>
</fieldset>
jQuery代码:
$(document).ready(function() {
$('.check-fieldset input').click(function() {
if ($(this).parents('.check-fieldset').find('input:checked').length >= 2) {
$(this).parents('.checkfieldset').find(':checkbox:not(:checked)').prop("disabled", true);
$(this).siblings('.hide');
} else {
$(this).parents('.check-fieldset').find(':checkbox').prop("disabled", false);}});
function marcarSeleccions(checkBoxes, alertofGroup, alertofGroupb) {
var limit = 2;
var selected = checkBoxes.parents('.checkfieldset').find('input:checked').length;
var count = limit - selected;
var first = checkBoxes.filter('.first').val();
var second;
if (checkBoxes.prop('checked')) {
switch (count) {
case 1:
{
checkBoxes.removeClass('first');
first = checkBoxes.val();
checkBoxes.addClass('first');
alertofGroup.html(first + " classifies first");
}
break;
case 0:
{
second = checkBoxes.val();
alertofGroupb.html(second + " classifies second");
$('.alert-group-all').html(first + " classifies first, " + second + " classifies second");
}
break;
case 2:
{
second = "";
first = "";
alertofGroup.html(first + "");
alertofGroupb.html(second + "");
}
}
};
};
// checkboxes click events
// group A
$('.group1').on('click', function() {
marcarSeleccions($(this), $('.alert-group-1'), $('.alert-group-1b'));
});
});
答案 0 :(得分:0)
您的代码中的问题是,当您使用类'group1'
调用元素上的click事件时,您传递的是被点击的当前元素$(this)
,而不是整个项目集合。
所以你的声明:var first = checkBoxes.filter('.first').val();
变得无效。
我想为了使用同一个类附加多个元素,只需通过marcarSeleccions($('.group1'), $('.alert-group-1'), $('.alert-group-1b'), $('.first-group1'), $('.second-group1'));
更新:
$(document).ready(function() {
// Set maximum number of selected checkboxes on fieldsets to two, disable rest
$('.check-fieldset input').click(function() {
if ($(this).parents('.check-fieldset').find('input:checked').length >= 2) {
$(this).parents('.check-fieldset').find(':checkbox:not(:checked)').prop("disabled", true);
$(this).siblings('.hide');
} else {
$(this).parents('.check-fieldset').find(':checkbox').prop("disabled", false);
}
});
// Retrieval of first and second classified by every fieldset
function marcarSeleccions(checkBoxes, alertofGroup, alertofGroupb) {
var limit = 2;
var selected = checkBoxes.parents('.check-fieldset').find('input:checked');
var count = limit - selected.length;
var first = selected.eq(0).val();
var second = selected.eq(1).val();
$('.alert-group-all').html("");
// if (checkBoxes.prop('checked')) {
switch (count) {
case 1:
{
alertofGroupb.html("");
checkBoxes.removeClass('first');
checkBoxes.addClass('first');
alertofGroup.html(first + " classifies first");
}
break;
case 0:
{
alertofGroup.html(first + " classifies first");
alertofGroupb.html(second + " classifies second");
$('.alert-group-all').html(first + " classifies first, " + second + " classifies second");
}
break;
case 2:
{
alertofGroup.html("");
alertofGroupb.html("");
} break;
// }
};
};
// checkboxes click events
// group A
$('.group1').on('click', function() {
marcarSeleccions($('.group1'), $('.alert-group-1'), $('.alert-group-1b'), $('.first-group1'), $('.second-group1'));
});
// end document js
});
答案 1 :(得分:0)
我会将选择存储在数组中并使用它来确定要在消息中显示的内容:
https://jsfiddle.net/jh3u9z5b/
$('.check-fieldset input').click(function() {
var $group = $(this).parents('fieldset'),
result = $group.data("result") || [],
maxcheck = $group.data("maxcheck");
if ($(this).is(":checked"))
result.push($(this).val());
else
result.splice(result.indexOf($(this).val()), 1);
$group.data("result", result);
if (result.length >= maxcheck) {
$group.find(':checkbox:not(:checked)').prop("disabled", true);
$(this).siblings('.hide');
} else {
$(this).parents('.check-fieldset').find(':checkbox').prop("disabled", false);
}
});
function marcarSeleccions($group, alertofGroup, alertofGroupb) {
var result = $group.data("result") || [],
resultlen = result.length;
alertofGroup.html(resultlen > 0 ? result[0] + " classifies first" : "");
alertofGroupb.html(resultlen > 1 ? result[1] + " classifies second" : "");
$('.alert-group-all')
.html(resultlen > 1 ? result[0] + " classifies first, " + result[1] + " classifies second": "");
};
$('#group1').on('click', function() {
marcarSeleccions($(this), $('.alert-group-1'), $('.alert-group-1b'));
});