所以我正在制作一种博客发布系统或 TODO 列表，无论您如何调用它。 我希望以下情况可能发生/可能发生:
- [工作] 用户在文本区域中输入内容
- [工作] 用户点击按钮。
- [工作] 将使用文本区域的文本创建一个新的 div。
- [工作] 文本区域将为空。
- [不起作用] 用户可以通过单击每个“.post”div 右侧的“X”来选择删除帖子。
但是:如果我在文本区域中没有任何内容时单击按钮，则会出现一个空的 div，只有一个“X”关闭按钮，也没有背景颜色。它们与上一条消息出现在同一行，因此您可以在彼此旁边看到很多“X”。
并且:单击“X”关闭按钮不会执行任何操作。 Firefox 控制台中没有错误。
如果不够清楚，运行这个 JSFiddle，点击按钮，我想你会明白我的意思:
JSFiddle
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="blog">
<h1>Blog post application</h1>
<div id="post-system">
<textarea id="poster" rows="5" cols="50" placeholder="Update status."></textarea>
<div id="button">Post</div>
<div id="posts">
</div>
</div>
</div>
</body>
</html>
jQuery 脚本:
<script>
$(document).ready(function () {
$('#button').click(function () {
var text = $('#poster').val();
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('.close-post').click(function () {
('.close-post').parent().hide();
});
});
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#blog {
background-color: blue;
margin: 50px;
padding: 50px;
text-align: center;
border-radius: 10px;
color: white;
display: block;
}
#poster {
color: default;
resize: none;
border: 1px solid black;
text-decoration: blink;
font-size: 20px;
display: inline-block;
position: relative;
border-radius: 5px;
border: 2px solid black;
padding-left: 10px;
padding-top: 5px;
}
#button {
background-color: #00FFFF;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
width: 50px;
float: left;
}
.post {
background-color: white;
color: blue;
margin-top: 20px;
width: auto;
display: block;
}
.close-post {
margin-right: 10px;
float: right;
color: red;
cursor: pointer;
}
最佳答案
您似乎有两个问题:
1) 如果 textarea 为空，您不希望创建帖子
简单修复。 . .在调用添加新帖子的逻辑之前检查它是否为空(并使用 jQuery 的 $.trim() 来仅考虑空格):
$('#button').click(function() {
var text = $.trim($('#poster').val());
if (text !== "") {
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
}
});
2) 'X' 按钮没有关闭帖子
这也应该是一个很容易解决的问题。 . .它们不工作的原因是因为加载页面时“X”按钮不存在，所以 $('.close-post').click(function() { 没有绑定(bind)在页面加载时传递给它们。您需要委托(delegate)该事件绑定(bind)，以便它将应用于在页面加载后动态添加的“X”按钮。
现在，不知道您使用的是哪个版本的 jQuery(我无法在工作中访问 jsFiddle)，我会为您指明正确的位置以找出正确的方法:https://api.jquery.com/on/
如果是 jQuery 1.7 或更高版本，你会这样做:
$("#posts").on("click", ".close-post", function() {
$(this).parent().hide();
});
如果您的版本早于该版本，请调查 jQuery .delegate() 和 .live() 方法以确定哪个适合您的版本代码..
关于javascript - 博客/消息 - 如何解决空消息 div 相互堆叠/相邻并使关闭按钮起作用的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29987763/