点击显示附件的div(on click display the div of attachments)

点击显示附件的div(on click display the div of attachments)

我有一个像下面的div在我的HTML默认显示没有。

<div class="attach-div" style ="display:none;"> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> </div>

现在我有一个像下面的表格

<div class="form-comment"> <form action=""> <div class="con"> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <input type="text" placeholder="Your Response"> <button class=""><i class="fa fa-paperclip attach-detail" aria-hidden="true"></i></button> </div> <input type="button" class="submit" value="ADD"> </form> </div>

点击回形针图标，我希望展示课程。

这是我正在尝试使用jQuery。

$(".attach-detail").click(function() { $(".attach-div").css('display', 'block'); });

下面是小提琴 。

I have a div like below in my html which by default has display none.

<div class="attach-div" style ="display:none;"> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> </div>

Now I have a form like below

<div class="form-comment"> <form action=""> <div class="con"> <button><i class="fa fa-smile-o" aria-hidden="true"></i></button> <input type="text" placeholder="Your Response"> <button class=""><i class="fa fa-paperclip attach-detail" aria-hidden="true"></i></button> </div> <input type="button" class="submit" value="ADD"> </form> </div>

On the click of the paperclip icon, I wish to show the class.

Here's what I am trying using the jquery.

$(".attach-detail").click(function() { $(".attach-div").css('display', 'block'); });

Below is the fiddle.

最满意答案

你在JavaScript的末尾错过了一个结束括号 - 你还需要在你的小提琴中使用attach-div类。

$(".attach-detail").click(function() { $(".attach-div").css('display', 'block'); });

您可能还想要防止默认提交行为（导致回发）

通过阻止默认操作并返回false来完成此操作：

$(".attach-detail").click(function(e) { e.preventDefault(); $(".attach-div").css('display', 'block'); return false; });

更新小提琴

You're missing a closing bracket on the end of your JavaScript - you also need to use the attach-div class in your fiddle.

$(".attach-detail").click(function() { $(".attach-div").css('display', 'block'); });

You may also want to prevent the default submit behaviour (causes a postback)

Do this by preventing the default action or returning false:

$(".attach-detail").click(function(e) { e.preventDefault(); $(".attach-div").css('display', 'block'); return false; });

updated fiddle