jQuery如果返回始終為false

Question

所以我這里有兩個問題

1. if會檢查此$isitchecked = $('#group' + groupnumber).hasClass("checked"); 即使該類具有“ 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??

這只是將click事件綁定到group1單選按鈕

---

即使您通過糾正上述問題來實施它，也不能保證用戶是否確實按組1，組2，組3的順序進行選擇。

---

即使您需要引用父組，也最好相對獲得它，而不要使用組號

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

可以像

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

但是同樣，jQuery具有內置的:checked選擇器，因此無需再次實現它，並且可能導致邊緣情況和錯誤。

---

這是解決問題的另一種方法。

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

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.如果否，則增加additional + progress-bar，然后將checked類添加到單擊的單選按鈕中。

第3.2步將確保下次單擊同一div的其他單選按鈕時不會發生任何情況。

Answer 4

在點擊事件結束時，你增加groupnumber一個。 它將在以后的點擊檢查中查找其他ID，因此您總是會得到錯誤的信息。

根據我認為您想要實現的目標，您應該執行以下操作（我試圖至少更改您的代碼）：

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

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

稍微更改了jQuery部分，應該很不言自明。
通常：不要對多個元素使用相同的id ； 是否附加數字。 我想不出一個需要或不弄亂的情況。

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

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

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

我還將建議自動生成您的問題的輸入； 如果您發現自己復制粘貼了很多代碼，然后更改了數字，幾乎可以肯定，您做錯了。