JQuery wenn kehrt immer falsch

Question

So habe ich zwei Probleme hier

1. Die if welcher prüft diese $isitchecked = $('#group' + groupnumber).hasClass("checked"); kehrt immer falsch, auch wenn die Klasse, die Klasse hat „geprüft“
2. obwohl die Group icrements es funktioniert immer noch nur mit der ersten Gruppe.

  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

Der einfachste Weg zu tun: -

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>

Erläuterung: -

auf Klick auf Optionsfeld: -

1.First zu prüfen, ob Es ist Elternteil div haben Radio Knopf wi th checked Klasse oder nicht?

2.Wenn nicht, dann erhöhen Sie die Addition + Fortschrittsbalken und fügen danach die checked Klasse zum angeklickten Optionsfeld hinzu.

3.2. Schritt wird sicherstellen, dass das nächste Mal, wenn andere Radio-Button der gleichen div wird geklickt. Nichts wird passieren.

Answer 2

Ihre if-Anweisung zuerst ausgeführt wird

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

und dann sind das Hinzufügen Sie die Klasse "geprüft"

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

Das ist es, warum gibt immer falsch zurück.

Sie müssen auch keine Inkrementlogik verwenden, Sie könnten dies verwenden, um das Radio zu finden, auf das geklickt wurde.

Answer 3

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

gleiche ist wie

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

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

Dies bindet nur in group1

---

Auch Ereignis Radio-Buttons klicken, wenn Sie es implementieren, indem oben genannten Problem zu korrigieren, können Sie nicht garantieren, wenn der Benutzer tut Wählen Sie in der Reihenfolge group1, group2, group3.

---

Auch wenn Sie einen Verweis auf die übergeordnete Gruppe benötigen, ist es besser, es relativ zu bekommen, anstatt die Gruppennummern mit

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

so etwas wie sein kann

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

Aber noch einmal, jQuery hat :checked Selektor eingebaut und es gibt keine Notwendigkeit, es erneut zu implementieren und kann Kantenfälle und Fehler verursachen.

---

Hier ist ein anderer Ansatz für das Problem.

Attribute selectors in [id^="group"] verwendet

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

Am Ende des Click-Ereignis Sie groupnumber um eins erhöht. Es macht eine zukünftige Klickprüfung für eine andere ID, weshalb Sie immer falsch werden.

Nach dem, was ich glaube, Sie erreichen wollen, sollten Sie etwas tun (Ich habe versucht, den Code auf Minimum zu ändern):

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

das Teil etwas jQuery geändert, sollte ziemlich selbsterklärend sein.
Allgemein: Verwenden Sie nicht denselben id für mehrere Elemente; Zahlen angehängt oder nicht. Ich kann mir keine einzige Situation vorstellen, in der das erforderlich ist oder nicht.

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>

Ich werde auch empfehlen automatisch generieren die Eingaben für Ihre Fragen; Wenn Sie feststellen, dass Sie viel Code kopieren und dann die Zahlen ändern, ist es fast garantiert, dass Sie es falsch machen.