JQuery - チェックボックスのチェックボックスに応じてケースを切り替える

Question

私はJqueryを習得しようとしているデザイナーで、現在のプロジェクトに問題があります。私は順番にdivを明らかにするチェックボックスをクリックできるようにする必要があります。クリックされたチェックボックスごとに、別のdivを生成する必要があります。私は、スイッチ機能はトリックを行うだろうと思ったが、私はそれを実装する方法を把握することができませんでした。これまで私が持っているものは次のとおりです。

<div"> 
    <input type="checkbox" id="test1" /> 
</div> 
<div> 
    <input type="checkbox" id="test2" /> 
</div> 

<script type="text/javascript"> 

$(function() { 
    $(':checkbox').click(function() { 
     if ($(this).prop('checked', true)) { 
      switch(this.id) { 

        case "test1"; 
        var newDiv = $('<div><p>it worked!!</p></div>'); 

      break; 

      case "test2"; 
        var newDiv = $('<div><p>it worked again!!</p></div>'); 

      break; 

      default; 
      } 
      newDiv.insertAfter($(this)); 

      $(this).after(newDiv); 
     } else { 
      $(this).next().filter('div').remove(); 
     } 
    }); 
}); 

</script> 

誰かが助けてくれることを願っています！

Answer 1

そんなに間違っているので、少し...

まず問題があるさ：

<div> 
    <input type="checkbox" id="test2" /> 
    <span style="display:none;"><div><p>it worked!</p></div></span> 
</div> 
<div> 
    <input type="checkbox" id="test2" /> 
    <span style="display:none;"><div><p>it worked again!</p></div></span> 
</div> 
$(function() { 
$(':checkbox').click(function() { 
    if ($(this).prop('checked', true)) { 
    $(this).after($(this).next('span')); 
    } 
}); 
}); 

Answer 2

なぜ特定のIDのクリック機能を設定するだけではないのですか？

$("#test1").click(function(){ $("your div1").show(); }); 
$("#test2").click(function(){ $("your div1").show(); }); 

Answer 3

このようなものがありますか？

<div> 
    <input type="checkbox" id="div1" /> 
</div> 

<div data-id='div1' style='display:none;'><p>it worked!</p></div> 
<div data-id='div2' style='display:none;'><p>it worked again!</p></div> 


$(function() { 
    $(':checkbox').click(function() { 
    var $box = $(this);  
    $("div[data-id='"+$box.attr('id')+"']").show(); 
    }); 
}); 

Answer 4

ここで代替ソリューションです

switch(this.id) 

すべきか：

switch($(this).attr('id')) // Need to wrap in jQuery object 

また、switch文が間違っています。あなたが持っているようにcaseの後に:があり、;ではないことに注意してください。

switch(n) { 
    case 1: 
     // Something 
     break; 
    case 2: 
     // Something 
     break; 
    default: 
     // Something 
} 

あなたは後でそれをアクセスするためにswitch文の外にnewDivを宣言する必要があります。 はその後、別の後にこれらのいずれかが意味をなさない、彼らは同じこと

newDiv.insertAfter($(this)); // Keep this one 
$(this).after(newDiv); 

を行うと、あなたはおそらく誤って入れたあなたのhtmlで余分"を持っている...

<div"> 

最後に、二重引用符と一重引用符を混ぜて、後で頭痛を与えます。あなたはどちらかを選ぶことをお勧めします。