如何在jQuery中使用兩種不同的方法？

Question

我想附加並顯示方法，如果複選框被選中，問題是兩個方法不能在同一時間工作。它顯示div或追加表。如何可以將表和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屬性。

下面是一個快速編輯，更改的線條閃爍着**（您可能必須向右滾動才能看到它們）。我只是在任何沒有它們的單元格周圍添加了行;你需要確保他們在正確的地方（S）：

$("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 
    }); 
});