jQueryではどのように2つの異なるメソッドを使用できますか？

Question

チェックボックスをオンにすると、メソッドを追加して表示しようとしていますが、両方のメソッドが同時に動作しないという問題があります。これはdivを表示したり、tableを追加したりします。 divチェックボックスがオンの場合は？ここ

は、コードは次のとおりです。

<input type="checkbox" name="want_nl" id="want_nl" value="newsletters" />age 

<div id="div1" class="tb" style="background-color:#0099CC">your img here</div> 

<table cellpadding="0" cellspacing="0" border="1" width="100%" id="newsletters"></table> 

$(function(){ 
$("input[name=want_nl]").click(function(){ 
     if ($(this).is(":checked")) 
     { 

      $('#newsletters').append('<table id="newsletter_types"></table>'); 
      $('#newsletter_types').append('<tr><td colspan="3" ><strong>Optioneel</strong></td></tr>'); 
      $('#newsletter_types').append('<td valign="top">Zoet-houdertje Chocolade lollys</td>'); 
      $('#newsletter_types').append('<td valign="top" >15 stuks a &euro; 22,50</td>'); 
      $('#newsletter_types').append('<td valign="top">uuu</td></tr>'); 
      $('.tb').show(); 
     } 
     else 

      $("#newsletter_types").remove(); 
      $('.tb').hide(); 
    }); 

}); 

Answer 1

表示/非表示の問題は、中括弧の欠落ペアです。

else 
    $("#newsletter_types").remove(); 
    $('.tb').hide(); 

...これと同じである：

else 
{ 
    $("#newsletter_types").remove(); 
} 
$('.tb').hide(); 

...あなたは意味場所：あなたはこの持ち

else 
{ 
    $("#newsletter_types").remove(); 
    $('.tb').hide(); 
} 

を別に、あなたに問題がありますオンザフライで表を作成するコード（行を持たないセルを追加しています）。また、$(this).is(':checked')は、チェックボックス要素がチェックされているかどうかを調べる非常に複雑な方法です。そのcheckedプロパティをそのまま使用してください。

ここで簡単な編集ができます。変更された行は**で表示されます（表示するには右にスクロールする必要があります）。私はちょうどそれらを持っていない任意の細胞の周りに行を追加しました。あなたは、彼らが正しい場所（複数可）にいることを確認する必要があります：あなたはあなたのコードにタイプミスがあり

$("input[name=want_nl]").click(function(){ 
     if (this.checked)               // ** Simplified `checked `check 
     { 
      // ** below, do just *one* append 
      $('#newsletters').append(
       '<table id="newsletter_types">' + 
       '<tr><td colspan="3"><strong>Optioneel</strong></td></tr>' + 
       '<tr><td valign="top">Zoet-houdertje Chocolade lollys</td></tr>' + // ** Added `tr` 
       '<tr><td valign="top" >15 stuks a &euro; 22,50</td></tr>' +  // ** Added `tr` 
       '<tr><td valign="top">uuu</td></tr>' + 
       '</table>' 
      ); 
      $('.tb').show(); 
     } 
     else 
     {                   // ** Added curly braces 
      $("#newsletter_types").remove(); 
      $('.tb').hide(); 
     }                   // ** Added curly braces 
    }); 

}); 

Answer 2

（行方不明{}他後）

$(function(){ 
    $("input[name=want_nl]").click(function(){ 
    if ($(this).is(":checked")) { 
     $('#newsletters').append('<table id="newsletter_types"></table>'); 
     $('#newsletter_types').append('<tr><td colspan="3" ><strong>Optioneel</strong></td></tr>'); 
     $('#newsletter_types').append('<td valign="top">Zoet-houdertje Chocolade lollys</td>'); 
     $('#newsletter_types').append('<td valign="top" >15 stuks a &euro; 22,50</td>'); 
     $('#newsletter_types').append('<td valign="top">uuu</td></tr>'); 
     $('.tb').show(); 
    } 
    else { //here 
     $("#newsletter_types").remove(); 
     $('.tb').hide(); 
    } //and here 
    }); 
});