Question

我想在使用jQuery选中/取消选中相应的复选框时添加/删除新的div。这是我的尝试：

<script type="text/javascript">
    $(function() {
        $("#form1 :checkbox#checkbox1").click(function() {
            var d = document.createElement('div');
            if ($(this).is(":checked")) {
                $(d).addClass("newdiv")
                    .html("This is a new div")
                    .appendTo($("#mydiv"))
                    .hide()
                    .fadeIn(1000);
                }
            else {
                //$(".newdiv").fadeOut(1000);
                $(d).fadeOut(1000);
            }
        });
    });
</script>

fadeIn过程顺利进行。但是当我尝试使用相同的方法fadeOut $（d）时，它不起作用：新生成的div保留在页面上。我做了一些研究，并使用$(".newdiv").fadeOut(1000);（在上面的代码中评论）进行了解决，但这对我来说并不是最好的解决方案。而且我真的想知道为什么我的第一次尝试不起作用。有什么建议？感谢。

Answer 1

您可以进行少量更改 1.由于您拥有复选框的ID，因此无需选择器#form1 :checkbox#checkbox1，您只需使用#checkbox1
2.使用jQuery创建div而不是使用createElement $('<div/>')
3.淡出div后，你需要将它从dom中删除

$(function() {
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide()
            .fadeIn(1000);
        }
        else {
            $('#mydiv .newdiv').fadeOut(function(){
                $(this).remove()
            })
        }
    });
});

演示：Fiddle

另一种解决方案是使静态div显示和隐藏

$(function() {
    var div = $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide();
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            div.fadeIn(1000);
        } else {
            div.fadeOut(1000)
        }
    });
});

演示：Fiddle

Answer 2

jsFiddle Demo

每次点击处理程序运行时，您都会使用新元素创建新变量d。相反，在单击处理程序之前执行此操作，因此每个实例将引用相同的元素。我在下面列出了其他可选改进。

change事件更适合复选框。另外，请注意我的选择器只是#checkbox1，因为它已经明确且最具体。

要获得更好的视觉效果，请不要添加元素，隐藏它，然后将其淡入。在大多数浏览器中，它会在元素出现之前显示闪烁。相反，使用类使用css隐藏它：.hidden {display: none;}。您还可以使用fadeToggle来切换可见性，而不是使用if / else。 clearQueue会在转换过程中删除多次点击的额外事件，并使转换显得更顺畅。

最后，使用jQuery创建元素：

$(function () {
    var $d = $('<div>', {
        "class": "hidden",
        text: "This is a new div"
    }).appendTo("#mydiv");

    $("#checkbox1").change(function () {
        $d.clearQueue()
          .stop()
          .fadeToggle(1000);
    });
});

Answer 3

你最好把它变成一个jQuery对象。

<script type="text/javascript">
    $(function() {
        $("#checkbox1").click(function() {
            var d = $('<div class="newdiv"></div>');
            if ($(this).is(":checked")) {
                d.html("This is a new div")
                .appendTo($("#mydiv"))
                .hide()
                .fadeIn(1000);
                }
            else {
                d.fadeOut(1000);
            }
        });
    });
</script>

使用jquery删除动态生成的div

3 个答案:

jsFiddle Demo