$ (document) .on ('change', '. Child-21', function() {}); с динамическим классом

Question

Я хочу сделать свою функцию, всякий раз, когда я нажимаю на переключатель, я хочу вызвать динамический класс - child-21-1, child-22-2. Но я не знаю, как сделать класс динамики в:

$(document).on('change','.child-21', function() {}); 

На этой основе я хочу показать скрыть другие div «с.

$(document).on('change','.child-21',function(){ 
    if($(this).val()=='No') { 
     $('.class-1').show(); 
     $('.class-2').show(); 
     $('.class-3').show(); 
     $('.class-4').show(); 
    } else if($(this).val()=='Yes') { 
     $('.class-1').hide(); 
     $('.class-2').hide(); 
     $('.class-3').hide(); 
     $('.class-4').hide(); 
    } else { 
     if ($('#ssn1').prop("checked") == true){ 
      $('#single-text').hide(); 
      $('.class-2').hide(); 
     } else if($('#ssn1').prop("checked") == false) { 
      $('#single-text').show(); 
      $('.class-2').hide(); 
     } else { 
      $('.child-21-div').slideDown(); 
      $('.class-2').hide(); 
     } 
    } 
}); 

HTML код

<div class="radio-inline"> 
    <input id="over21" type="radio" name="over21[<?php echo $i; ?>]" class="child-21<?php echo $i; ?>" value="Yes" <?php echo (isset($_SESSION['step4a_data']['over21'][$i]) && $_SESSION['step4a_data']['over21'][$i]=='Yes') ?'checked':''; ?>><label for="radio1">Yes</label> 
</div> 
<div class="radio-inline"> 
    <input id="over22" type="radio" name="over21[<?php echo $i; ?>]" class="child-21<?php echo $i; ?>" value="No" <?php echo (isset($_SESSION['step4a_data']['over21'][$i]) && $_SESSION['step4a_data']['over21'][$i]=='No') ?'checked':''; ?> ><label for="radio2"> No</label> 
</div> 

Answer 1

Если вы хотите, чтобы показать/скрыть другие div элементы в зависимости от значения флажка см код ниже:

JavaScript:

$(function() { // This is shorthand in jQuery for once document has loaded 
    $('#over21').on('change', function() { 
     console.log("The user is over 21."); 
     $('#over21-div').show(); 
     $('#over22-div').hide(); 
    }); 
    $('#over22').on('change', function() { 
     console.log("The user is over 22."); 
     $('#over22-div').show(); 
     $('#over21-div').hide(); 
    });   
}); 

HT ML:

<div class="radio-inline"> 
    <input id="over21" type="radio" name="over21" class="child-21" value="Yes" unchecked><label for="radio1">Yes</label> 
</div> 
<div class="radio-inline"> 
    <input id="over22" type="radio" name="over21" class="child-21" value="No" unchecked><label for="radio2"> No</label> 
</div> 
<div id="over21-div"> 
    <p>Only shows if yes.</p> 
</div> 
<div id="over22-div"> 
    <p>Only shows if no.</p> 
</div> 

См рабочий код как JSFiddle here.

P.S. Обратите внимание, что я удалил встроенный PHP. который я бы советовал так сильно - отделите свой PHP на функции, а затем назовите их inline, чтобы у вас было как можно меньше PHP в вашем HTML. Например, сравните:

<p><?php if (someBoolean) { echo "Bad result."; } elseif (someOtherBoolean && checkbox.booleanReturningFunction()) { echo "Some worse result"; } elseif (life.hasMeaning()) { echo "This is getting confusing."; } else { echo "Yay it worked."; } ?></p> 

к:

<!-- Nearer the top of our HTML document --> 
<?php 
    function awesome_function() { 
     if (someBoolean) { 
      echo "Bad result."; 
     } elseif (someOtherBoolean && checkbox.isUserCoolEnough()) { 
      echo "Some worse result"; 
     } elseif (life.hasMeaning()) { 
      echo "This is getting confusing."; 
     } else { 
      echo "Yay it worked."; 
    } 
?> 

... 

<!-- At the inline area --> 
<p><?php awesome_function(); ?></p> 

, который намного лучше, и более ремонтопригодны

Answer 2

метод изменения Bind после обновления HTML

$('.child-21').unbind(); 
if($('.child-21').length > 0 && $._data($('.child-21')[0],"events") == undefined){ 
    $('.child-21').bind('change',function(){ 
     // write your code 
    }); 
}