$（document）.on（ 'change'、 'child-21'、function（）{}）;動的なクラスで

Question

私はラジオボタンをクリックするたびに、私は自分の機能を作りたいと思っています。私は、子ども21-1、子22-2のような動的なクラスを呼びたいと思います。私は非表示他のdiv年代を示したいと思いますこれに基づき

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

：しかし、私は、クラスを動的にする方法がわかりません。

$(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を関数に分割し、インラインで呼び出すことで、できるだけHTMLにPHPをほとんど持たないようにします。例えば、比較する：

<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

バインドの変更方法をあなたのhtml

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