Jquery si retourne toujours faux

J'ai 2 problèmes iciJquery si retourne toujours faux

Les cas qui vérifie cette $isitchecked = $('#group' + groupnumber).hasClass("checked"); renvoie toujours faux, même si la classe a la classe « vérifié »
même si le groupnumber icrements cela fonctionne encore juste avec le premier groupe.

  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>

Source

2017-09-12 key

Oubliez votre code jQuery. Qu'est-ce que vous voulez exactement réaliser, pouvez-vous expliquer cela? (Expliquer en question) –

Vous ne connectez que l'événement 'click' sur' # group1 input [type = "radio"] ', pas sur un autre élément. –

chaque fois que je réponds à une question avec 44, la barre de progression devrait bouger ou ajouter 2.27272727, mais si je change d'avis à propos d'une question, le barde de progression ne devrait rien ajouter car j'ai déjà vérifié ce bloc. Cela a-t-il du sens? – key

-1

meilleure façon de faire: -

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>

Explication: -

sur un clic de bouton radio: -

1.Premièrement vérifier que c'est div parent avoir un bouton radio wi checked classe ou non?

2.Si l'addition + la barre de progression ne sont pas augmentées, ajouter ensuite la classe checked au bouton radio cliqué. Le 3ème pas assurera que la prochaine fois que l'autre bouton radio du même div cliquera. Rien ne se produira.

Source

2017-09-12 12:05:12

Votre instruction if est exécuté en premier

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

puis vous ajoutez la classe "checked"

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

C'est pourquoi il renvoie toujours false.

De plus, vous n'avez pas besoin d'utiliser la logique d'incrémentation, vous pouvez utiliser ceci pour trouver la radio sur laquelle vous avez cliqué.

Source

2017-09-12 11:57:23 Dhagej

Je dois ajouter la classe après l'instruction if, sinon la chose ne fonctionne pas du tout. mais bon point, merci – key

La condition d'utilisation a basé l'attribut vérifié au lieu de la classe comme sabithpocker mentionné dans sa réponse – Dhagej

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

est la même que

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

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

Ce juste lie cliquez événement à des boutons radio dans group1

Même si vous le mettre en œuvre en corrigeant ci-dessus problème, vous ne pouvez pas garantir si l'utilisateur ne sélectionnez dans le groupe de commande1, groupe2, groupe3.

Même lorsque vous avez besoin d'une référence au groupe de parent, il est préférable de l'obtenir relativement, plutôt que d'utiliser les numéros de groupe

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

peut être quelque chose comme

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

Mais encore une fois, jQuery a :checked sélecteur intégré et il n'y a pas besoin de l'implémenter à nouveau et peut causer des cas de bord et des erreurs.

Voici une approche différente du problème.

Attribute selectors utilisé dans [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>

Source

2017-09-12 12:06:24 sabithpocker

A la fin de l'événement click vous augmentez groupnumber par un. Il fait un futur clic vérifier un ID différent, c'est pourquoi vous obtenez toujours faux.

D'après ce que je crois que vous voulez atteindre, vous devez faire quelque chose comme ça (j'ai essayé de changer votre code au minimum):

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>

Source

2017-09-12 12:08:56

Changé la partie jQuery un peu, devrait être assez explicite. En général, n'utilisez pas la même id pour plusieurs éléments; numéros ajoutés ou non. Je ne peux pas penser à une seule situation où cela est nécessaire ou pas en désordre.

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>

Je recommande également de générer automatiquement les entrées pour vos questions; Si vous vous trouvez en train de copier-coller beaucoup de code, puis en changeant les chiffres, vous êtes à nouveau presque sûr de le faire mal.

Source

2017-09-12 12:16:17

Jquery si retourne toujours faux

Répondre

Questions connexes