2

当使用 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 过程顺利出来。但是，当我尝试使用相同的方法淡出 $(d) 时，它不起作用：新生成的 div 仍保留在页面上。我做了一些研究并得到了解决，$(".newdiv").fadeOut(1000);（在上面的代码中注释），但我认为这对我来说不是最好的解决方案。而且我真的很想知道为什么我的第一次尝试没有奏效。有什么建议么？谢谢。

4

3 回答 3

1

您可以进行一些更改
1. 不需要选择器#form1 :checkbox#checkbox1，因为您有复选框的 id，您可以只使用#checkbox1
2. 使用 jQuery 而不是使用 createElement 创建 div $('<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()
            })
        }
    });
});

演示：小提琴

另一种解决方案是有一个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)
        }
    });
});

演示：小提琴

于 2013-03-22T03:25:14.767 回答
1

jsFiddle 演示

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

事件更change适合复选框。另外，请注意我将您的选择器设置为 just #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);
    });
});
于 2013-03-22T03:34:00.183 回答
-1

你最好制作一个 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>
于 2013-03-22T03:16:57.447 回答