Question

我编写了一个脚本，用于在点击时在div内部渲染文本（稍后是局部视图）。我检测div是否可见，如果没有，我在点击时添加文本并使div可见。这部分很完美。单击并且div可见时，我想删除已添加的内容，以便在我多次单击它时不会繁殖。

我得到警报 - 因此检测div可见性有效，但文本未被删除，如果我多次点击它会增加。

这是我的代码 - 你能告诉我我做错了吗？

<script language="javascript">
    $(document).ready(function () {
        $(".content").hide();
        $(".heading").click(function () {
            var id = $(this).attr("id");
            var content = $(this).next(".content");

            if (content.is(":hidden")) {
                content.append("<p id='render-object'>Testing rendering on click</p>");
                alert('Content is opening');
            }
            else if (content.is(":visible")) {
                content.next("#render-object").remove();
                alert('Content is closing');
            }

            content.slideToggle(100);                
        });
    });
</script>

Answer 1

删除时，您可能希望使用.find()而不是.next（）。

Answer 2

使用.html()代替.append()

<script language="javascript">
    $(document).ready(function () {
        $(".content").hide();
        $(".heading").click(function () {
            var id = $(this).attr("id");
            var content = $(this).next(".content");

            if (content.is(":hidden")) {
                content.html("<p id='render-object'>Testing rendering on click</p>");
                alert('Content is opening');
            }
            else if (content.is(":visible")) {
                content.find("#render-object").remove();
                alert('Content is closing');
            }

            content.slideToggle(100);                
        });
    });
</script>

修改： - 使用.find()代替.next()，因为render-object是content的孩子，而不是兄弟

Answer 3

使用.find代替.next并使用.html代替.append

<script language="javascript">
$(document).ready(function () {
    $(".content").hide();
    $(".heading").click(function () {
        var id = $(this).attr("id");
        var content = $(".content");

        if (content.is(":hidden")) {
            content.html("<p id='render-object'>Testing rendering on click</p>");
            alert('Content is opening');
        }
        else if (content.is(":visible")) {
            content.find("#render-object").remove();
            alert('Content is closing');
        }

        content.slideToggle(100);                
    });
});
</script>

使用jQuery从div中删除

3 个答案: