所以基本上我有一个允许评论的小社交网站。我构建了一个评论部分,一旦用户单击“评论”,该评论部分就会向下滑动,并在用户状态下向下滑动。
我的问题是,现在,JavaScript 只适用于一个帖子 ID,而其余的则不能,显然你只能使用一个 ID 一次。但当然,如果我改用类,所有评论部分都会向下滑动,因为现在它们都是同一类。请参阅下面的 HTML 和 JavaScript。
所以如果有人有更好的方法,请帮忙:)
$(function () {
$(".comment-box").slideUp();
//when "comment" is clicked, slide down the comment box.
if ($(".comment-box-btn").click(function () {
$(".comment-box").slideDown();
}));
//when "cancel" is clicked, slide up the comment box.
if ($(".close-comment-box").click(function () {
$(".comment-box").slideUp()
}));
});
这是使用的 HTML
//anchor for "Comment"
<a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a>
//comment box
<div class="row comment-box" style="display:none;">
<div class="col-md-12">
<form accept-charset="UTF-8" action="" method="post">
<textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea>
<div class="text-right" style="margin-top:20px;">
<a class="btn btn-default close-comment-box" href="#">
<span class="glyphicon glyphicon-remove"></span> Cancel</a>
<button class="btn btn-info" type="submit">Comment</button>
</div>
</form>
</div>
</div>
最佳答案
如果每个评论框都与其按钮相邻,您可以这样做
修订版本:
$(function () {
//slide up the box on page load.
$(".comment-box").slideUp();
$(".comment-box-btn").each(function (i) {
$(this).click(function () {
$(".comment-box").eq(i).slideDown(500, function () {
$(this).find(".close-comment-box").click(function () {
$(".comment-box").eq(i).slideUp()
});
});
}); // click
}); // each
});
查看新 JSFIDDLE
关于多个类的Javascript点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19885696/