开关情况下的jQuery变量返回未定义，而在另一种情况下返回值，即使变量是在开关外部声明的

Question

我希望能够在html中显示一条消息，其中两个动态值通过switch语句声明为变量。

当在每种情况下分别调用这两个值时，switch语句显示带有这两个数值的消息，但当我在第二种情况下将它们放在一起时，第一个值返回undefined。

在最后一种情况下，我需要两个变量都有它们的值，这样我就可以把它们放在同一个html元素中，而不是像现在这样放在两个元素中。

JSfiddle示例

HTML代码：

<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'));
});
});

Answer 1

代码中的问题是，当您在类为'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
});

工作示例：https://jsfiddle.net/DinoMyte/ptv22kq8/11/

Answer 2

我会将选择存储在一个数组中，并使用它来确定在消息中显示什么：

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'));
  });