使用jQuery从内部div中删除
使用jQuery从内部div中删除
提问于 2014-07-23 09:22:36
我已经编写了一个脚本，它应该在单击div中呈现文本(稍后是部分视图)。我检测到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>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-07-23 09:24:51
使用.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的子级而不是兄弟级
Stack Overflow用户
发布于 2014-07-23 09:26:35
在删除时，您可能希望使用.find()而不是.next()。
Stack Overflow用户
发布于 2014-07-23 09:27:47
用.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24906640
复制相关文章
相似问题
腾讯云开发者
