javascript - Jquery if 返回总是 false

Question

所以我这里有两个问题

1. 检查此的 if $isitchecked = $('#group' + groupnumber).hasClass("checked");即使该类具有“已检查”类，也始终返回 false
2. 即使组编号递增，它仍然仅适用于第一组。

            var progressProcent = 0;
            var groupnumber = 1;

        $('#group' + groupnumber + ' input[type="radio"]').click(function(){

         $whatgroup = "#group" + groupnumber;

         $isitchecked = $('#group' + groupnumber).hasClass("checked");

          if ($isitchecked) {

          }else{
            progressProcent = progressProcent + 2.27272727;
          }

            $("#progress-container").removeClass("hide");
            $( $whatgroup).addClass("checked");

            $("#progress-bar").css('width', progressProcent + '%');

          groupnumber = groupnumber + 1;

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="question form-group">
          <h3>Question 1</h3>
          <fieldset class="test-field pull-left" id="group1">
            <input type="radio" name="q1" id="q1option1" class="left" value="-3">

            <input type="radio" name="q1" id="q1option2" class="left" value="-2">

            <input type="radio" name="q1" id="q1option3" class="left" value="-1">

            <input type="radio" name="q1" id="q1neotral1" value="0">

            <input type="radio" name="q1" id="q1option1r" class="right" value="1">

            <input type="radio" name="q1" id="q1option2r" class="right" value="2">

            <input type="radio" name="q1" id="q1option3r" class="right" value="3">
          </fieldset>
        </div>
        <br>
        <div class="question form-group">
          <h3>Question 2</h3>
          <fieldset class="test-field pull-left" id="group2">
            <input type="radio" name="q2" id="q2option1" class="left" value="-3">

            <input type="radio" name="q2" id="q2option2" class="left" value="-2">

            <input type="radio" name="q2" id="q2option3" class="left" value="-1">

            <input type="radio" name="q2" id="q2neotral1" value="0">

            <input type="radio" name="q2" id="q2option1r" class="right" value="1">

            <input type="radio" name="q2" id="q2option2r" class="right" value="2">

            <input type="radio" name="q2" id="q2option3r" class="right" value="3">
          </fieldset>
        </div>
         <br />
         <br />
        <div class="progress-container" id="progress-container">
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >
            </div>
          </div>
        </div>

Answer 1

var groupnumber = 1;
$('#group' + groupnumber + ' input[type="radio"]').click(function(){

与

相同

$('#group1 input[type="radio"]').click(function(){

groupnumber = groupnumber + 1;// doesn't do anything??

这只是将点击事件绑定(bind)到group1中的单选按钮

<小时/>

即使您通过纠正上述问题来实现它，您也无法保证用户是否按照 group1、group2、group3 的顺序进行选择。

<小时/>

即使您需要对父组的引用，最好是相对地获取它，而不是使用组号

$isitchecked = $('#group' + groupnumber).hasClass("checked");

可以是这样的

$isitchecked = $(this).parent().hasClass("checked");

但是，jQuery 有 :checked选择器内置，无需再次实现，并且可能会导致边缘情况和错误。

<小时/>

这是解决该问题的不同方法。

Attribute selectors用于[id^="group"]

$('fieldset[id^="group"] input[type="radio"]').click(function() {
// click event on all fields with id starting with group
  var checked = $("input[type='radio']:checked").length;
  // get number of radio button checked
  var total = $('fieldset[id^="group"]').length;
  // get total number of field sets
  var percent = checked/total*100;
  $("#progress-bar").css('width', percent + '%');
});

$('[id^="group"] input[type="radio"]').click(function() {
  var checked = $("input[type='radio']:checked").length;
  var total = $('fieldset[id^="group"]').length;
  var percent = checked/total*100;
  $("#progress-bar").css('width', percent + '%');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="question form-group">
  <h3>Question 1</h3>
  <fieldset class="test-field pull-left" id="group1">
    <input type="radio" name="q1" id="q1option1" class="left" value="-3">

    <input type="radio" name="q1" id="q1option2" class="left" value="-2">

    <input type="radio" name="q1" id="q1option3" class="left" value="-1">

    <input type="radio" name="q1" id="q1neotral1" value="0">

    <input type="radio" name="q1" id="q1option1r" class="right" value="1">

    <input type="radio" name="q1" id="q1option2r" class="right" value="2">

    <input type="radio" name="q1" id="q1option3r" class="right" value="3">
  </fieldset>
</div>
<br>
<div class="question form-group">
  <h3>Question 2</h3>
  <fieldset class="test-field pull-left" id="group2">
    <input type="radio" name="q2" id="q2option1" class="left" value="-3">

    <input type="radio" name="q2" id="q2option2" class="left" value="-2">

    <input type="radio" name="q2" id="q2option3" class="left" value="-1">

    <input type="radio" name="q2" id="q2neotral1" value="0">

    <input type="radio" name="q2" id="q2option1r" class="right" value="1">

    <input type="radio" name="q2" id="q2option2r" class="right" value="2">

    <input type="radio" name="q2" id="q2option3r" class="right" value="3">
  </fieldset>
</div>
<br />
<br />
<div class="progress-container" id="progress-container">
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
</div>