jquery - 我如何在 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属性即可。

这是一个快速编辑，更改的行标记为 **(您可能需要向右滚动才能看到它们)。我只是在没有行的单元格周围添加了行；您需要确保它们位于正确的位置:

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

});