用于多个类的Javascript单击函数
所以基本上我有一个允许评论的社交网站。我已经建立了一个评论部分,一旦用户点击“评论”,它就会在用户状态下向下滑动 我的问题是,现在JavaScript只在一个post ID上工作,其他的显然不能,因为您只能使用一个ID一次。当然,如果我改用类,所有注释部分都会向下滑动,因为现在它们都是同一个类。我的HTML和JavaScript见下文 因此,如果有人有更好的方法,请帮助:) 下面是使用的HTML用于多个类的Javascript单击函数,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,所以基本上我有一个允许评论的社交网站。我已经建立了一个评论部分,一旦用户点击“评论”,它就会在用户状态下向下滑动 我的问题是,现在JavaScript只在一个post ID上工作,其他的显然不能,因为您只能使用一个ID一次。当然,如果我改用类,所有注释部分都会向下滑动,因为现在它们都是同一个类。我的HTML和JavaScript见下文 因此,如果有人有更好的方法,请帮助:) 下面是使用的HTML //anchor for "Comment" <a class="comment-box-b
//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>
//注释的锚点
//评论框
评论
而不是调用$(“.comment box”).slideDown()代码>和$(“.comment box”).slideUp()在处理程序上,尝试使用$(this)
和parent()
函数。如果我没弄错的话,按钮分为三个级别,所以应该是:
$(function(){
//slide up the box on page load.
$(".comment-box").slideUp();
//when "comment" is clicked, slide down the comment box.
if($( ".comment-box-btn" ).click( function() {
$(this).parent().parent().parent().slideDown();
{
//when "cancel" is clicked, slide up the comment box.
if($( ".close-comment-box" ).click( function() {
$(this).parent().parent().parent().slideUp()
}));
}}));
});;
如果关闭注释框
按钮位于注释框
内,您可以找到父项:
$('.close-comment-box').click(function(){
$(this).parents('.comment-box:eq(0)').slideUp();
});
这样,它只应用按钮所属的父注释框,而不是所有注释框。如果每个注释框与其按钮相邻,您可以这样做
修订版:
$(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
});
请参见新建OP不希望向下滑动注释框btn
按钮;)是 啊那是行不通的。这将要求.comment box btn
向下滑动…如果您有多个comment btn实例并同时打开它们。关闭/向上滑动会有问题吗?@ajc可以在JSfiddle上工作,但在上传到我的服务器时不会。哈哈
$(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
});