jquery - Jquery .remove 不起作用（对我来说......）

Question

我在这里尝试让复选框在选中时附加一个 div，并在取消选中时删除相同的 div。我相信问题出在调用 .remove() 时。我只是不知道问题是什么。非常感谢你的帮助！

    $(document).ready(function(){
         $('.checked_locations').click(function(){
            if ($(this).is(':checked'))
            {
                var value = $(this).val();
                $('#locations_filter').append("<div id='hidden_"+value+"'><input type='hidden' name='loc_filter[]' value='"+value+"' /></div>");
            }
            else
            {
                //alert('not checked');
                $('#locations_filter #hidden_'+value).remove(); 
            }
        });

    });

Answer 1

value在您的 else 语句中未定义。将它的声明移到 if 语句之外。

$(document).ready(function() {
    $('.checked_locations').click(function() {
        var value = $(this).val();
        if ($(this).is(':checked')) {
            $('#locations_filter').append("<div id='hidden_" + value + "'><input type='hidden' name='loc_filter[]' value='" + value + "' /></div>");
        }
        else {
            //alert('not checked');
            $('#hidden_' + value).remove();
        }
    });
});​

Answer 2

您正在尝试将 value 变量从不同的块引用到您首次定义它的位置：它超出了范围。您需要移出var value = $(this).val();if 语句。

Answer 3

只需使用以下代码：

$('#hidden_'+value).remove(); 

元素 id 必须是唯一的，因此您将引用一个唯一的项目。

Answer 4

else
{
    var value = $(this).val();
    $('#locations_filter #hidden_'+value).remove(); 
}

Answer 5

一种更优雅的方式来做你想做的事：

$(document).ready(function(){
     var element;
     $('.checked_locations').click(function(){
        if ($(this).is(':checked'))
        {
            var value = $(this).val();
            element= $('#locations_filter').append("<div id='hidden_"+value+"'><input type='hidden' name='loc_filter[]' value='"+value+"' /></div>");
        }
        else
        {
            //alert('not checked');
            element.remove(); 
        }
    });

});

这是一个闭包，它是动态语言中一种非常强大的技术。如果您打算在 javascript 中进行认真的开发，那么学习它会很好。