Question

所以我在这里有两个问题

检查此$isitchecked = $('#group' + groupnumber).hasClass("checked");的if返回始终为false，即使该类具有“已检查”类
即使该组号数据仍然可以与第一组一起使用。

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

这只是将点击事件绑定到group1

中的单选按钮

即使您通过纠正上述问题来实施它，也无法保证用户是否在订单group1，group2，group3中进行选择。

即使您需要对父组的引用，最好相对而言，而不是使用组号

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

可以是

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

但同样，jQuery内置了Attribute selectors选择器，无需再次实现它，并且可能导致边缘情况和错误。

这是解决问题的另一种方法。

[id^="group"]

中使用的

ls-files

$('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>

Answer 2

首先执行if语句

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

然后你要添加“已检查”类

$( $whatgroup).addClass("checked");

这就是它总是返回false的原因。

此外，您不必使用增量逻辑，您可以使用它来查找被点击的无线电。

Answer 3

最简单的方法： -

progressProcent = 0;
$("input[type='radio']").on('click',function(){
   if($(this).parent().find('.checked').length ==0){
      progressProcent = progressProcent + 2.27272727;
      $("#progress-bar").css('width', progressProcent + '%');
   } 
   $(this).addClass('checked');
});

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

<强> 说明： -

单击单选按钮

： -

1.首先检查它的父div有没有checked类的单选按钮？

2.如果没有，则添加+进度条增加，然后将checked类添加到单击的单选按钮。

3.2nd步骤将确保下次点击相同div的其他单选按钮时。不会发生任何事情。

Answer 4

在点击事件结束时，您将groupnumber增加一个。它为将来的点击检查提供了不同的ID，这就是为什么你总是会弄错。

根据我认为你想要实现的目标，你应该做这样的事情（我试着改变你的代码）：

＆＃13;

var progressProcent = 0;

// Selects all inputs inside the fieldsets (since all of them
// have the .test-field class)

$('.test-field input[type="radio"]').click(function(){
    
    // Gets the closest fieldset
    $whatgroup = $(this).closest('.test-field');
    
    $isitchecked = $whatgroup.hasClass("checked");
    
    if ($isitchecked) {
        
    }else{
        progressProcent = progressProcent + 2.27272727;
    }
    
    $("#progress-container").removeClass("hide");
    $whatgroup.addClass("checked");
    
    $("#progress-bar").css('width', progressProcent + '%');   
    
});

＆＃13;

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

＆＃13;

Answer 5

稍微改变了jQuery部分，应该是不言自明的一般情况下：不要对多个元素使用相同的id;附加或不附加的数字。我想不出那种需要或不需要凌乱的情况。

＆＃13;

var progressProcent = 0.0;
var questions = [];
var $questions;

function updateProgress(add) {
  if (add) progressProcent += 100 / $questions.length;
  $("#progress-container").removeClass("hide");
  $("#progress-bar").css('width', progressProcent + '%');
}

$(function() {
  $questions = $('.question');
  $questions.each(function(i) {
    $fieldset = $(this).find('fieldset');
    for (var v = -3; v <= 3; v++) {
      var theClass = v !== 0 ? (v < 0 ? "left" : "right") : null;
      var $input = $('<input>').attr("type", "radio").val(v).addClass(theClass).on('change', function() {
        if (!questions[i]) updateProgress(true);
        questions[i] = Number($(this).val());
        console.log(questions);
      });
      $fieldset.append($input);
    }
  });
});

＆＃13;

fieldset input.left {
  margin-right: 5px
}

fieldset input.right {
  margin-left: 5px
}

＆＃13;

<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">
  </fieldset>
</div>
<br>
<div class="question form-group">
  <h3>Question 2</h3>
  <fieldset class="test-field pull-left" id="group2">
  </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>

＆＃13;

我还建议您自动生成问题的输入;如果你发现自己复制粘贴大量代码，然后改变数字，你又几乎可以保证做错了。

Jquery如果返回总是false

5 个答案: