Question

当按下'commentDIV'按钮时，我试图切换DIV（隐藏和显示）..但它不是到目前为止工作...我的HTML代码如下。我想在这里做的是隐藏/显示DIV块仅按下按钮....我不知道如何将按钮绑定到DIV ....我的代码能够隐藏DIV不再显示.. 。我认为它只适用于第一次评论DIV而不是其他人...

<html>
    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('.commentDIV').hide();
        $('.commentButton').click(function () {
                        $(this).next('.commentDIV').show();
                    });
        $('.closeButton').click(function () {
                        $(this).next('.commentDIV').hide();
                    });
        });


    </script>
    </head>
<body>
                    <div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:5px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close comments</button>
                            <div class="commentDIV" style="height:300px;overflow-x:hidden;">
                                <table border=".1em">
                                    <tr>
                                        <td style="text-align:center;width:100px;height:100px;border-radius:5px;-moz-border-radius:5px;background: url(avatar.jpg) no-repeat center"></td>
                                        <td style="width:600px;">
                                            <div style="text-align:left;border-radius:5px;-moz-border-radius:5px;width:100%;overflow: auto;">Nice coupons
                                            </div>
                                        </td>
                                    </tr>
                                </table>

                                </div>
                            </td>
                        </tr>

                        </table>
                    </div>
                    <div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <div class="commentDIV">
                                <div>Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</div>
                                </div>
                            </td>
                        </tr>

                        </table>
                    </div><div id="abc" style="border:2px dashed;width:600px;background:white;">
                        <table border="2px">
                            <tr>
                                <td style="text-align:center;">
                                    <div style="border:2px solid;margin:2px;padding:2px;width:60px;border-radius:10px;moz-border-radius:10px;background:#39C46E;height:50px;text-align:center;line-height: 25px;white-space:nowrap;color:white;display:inline-block;">
                                    100 %<br>Success</div>
                                    <span style="color: green">&#10004;&nbsp;Tested</span>
                                    <span>24/4/2013</span>
                                </td>
                                <td>
                                    <span id="couponTitle" >FLAT 25% OFF ON ALL MITASHI TABLETS</span><br>

                                    <span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#39C46E;color:white">GCKSPNHIAC18</span>
                                    <br>
                                    <span style="font-size:10pt;">Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</span>
                                </td>
                                <td style="text-align:center;width:100px">
                                    <span style="font-size:10pt;">Did this coupon work for you?</span>
                                    <br>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#39C46E;color:white;width:50px;">Yes</button>
                                    <button type="button" style="border-radius:5px;-moz-border-radius:10px;background:#FF511C;color:white;width:50px;">No</button>
                                </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:right;">
                            <button type="button" class="commentButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
                            <div class="commentDIV">
                                <div>Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.</div>
                                </div>
                            </td>
                        </tr>

                        </table>
                    </div>
</body>             
</html>

更新：添加了一个小提琴here

我已更新代码以添加另一个用于关闭commentDIV的按钮

Javascript是：

$(document).ready(function () {
        $('.commentDIV').hide();
        $('.commentButton').click(function () {
                        $(this).next('.commentDIV').show();
                    });
        $('.closeButton').click(function () {
                        $(this).next('.commentDIV').hide();
                    });
        });

和新按钮是：

<button type="button" class="closeButton" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Close comments</button>

但这不起作用为什么？

Answer 1

您需要进行一些更改，而不是使用id use class属性，因为id在文档中应该是唯一的

$(document).ready(function() {
    $(document).on('click', '.commentButton', function() {
        $(this).next('.commentDIV').toggle()
        alert("xscs");
    });
});

演示：Fiddle

Answer 2

你目前正在使用commentButton作为id，它会重复多次..当你使用ID调用它时，它应该只有一次页面。如果你想多次使用它应该被声明为class..So尝试使用类

Answer 3

您调用hide()而不是toggle()。隐藏只会隐藏元素。切换将在隐藏时显示，并在显示时隐藏。

此语法$('#commentDIV')负责查找ID为commentDIV的元素。 Id元素在HTML中应该是唯一的，因此jquery假定它只是一个。

Answer 4

试试这个：

$(document).ready(function () {
    $('.commentButton').click(function () {
        $(this).next('.commentDIV').toggle();
    });
});

使用toggle() - 显示或隐藏匹配的元素。
使用next() - 获取commentButton的紧随其后的兄弟。

Answer 5

jQuery附带了另一种方法，可以完全满足您的需求：.toggle()

但是，您的HTML不止一次使用相同的ID“commentDIV”。考虑将这些转换为类，或者使用另一个选择器来选择要切换的div。

Answer 6

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。

所以将id =“commentDIV”更改为class =“commentDIV”并尝试。

代码：

$('.commentButton').click(function() {
    var commentDiv = $(this).closest('tr').find('.commentDIV');

    if (commentDiv.is(":visible")) {
        commentDiv.hide();
    } else {
        commentDiv.show();
    }
    alert("xscs");
});

http://jsfiddle.net/KesY6/1/

Answer 7

这是对你的小提琴的编辑，它展示了其他人都在说的答案：

http://jsfiddle.net/h4G6N/1/

以下是更新后的HTML示例：

<button type="button" id="commentButton" class="comment-button" style="border-radius:5px;-moz-border-radius:10px;color:white;width:100px;">Add comments</button>
    <div id="commentDIV" class="comment-block">
        Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.Get the Samsung Galaxy Ace Duos S6802 (black) listed on the landing page for Rs. 8495 (Originally for Rs. 9990). Offer valid till 25th April midnight.
    </div>
</button>

这是JS：

$(function() {
    $('.comment-button').click(function() {
        $(this).next(".comment-block").toggle();
        alert("xscs");    
    });
});

基本上：你需要使用类选择器而不是ID选择器，因为你的ID不是唯一的（这是另一个问题）。

Answer 8

DEMO ::

http://jsfiddle.net/Praveen16oct90/KesY6/

使用此编码并尝试使用

  $(document).ready(function() {


        $('#commentButton').click(function() {

    $('#commentDIV').toggle();

    });
});

Answer 9

jQuery deprecated toggle()方法。更好地使用.toggleClass()。

.show{
   display: block;
}
.hide{
    display:none;
}
    $("#commentButton").click(function(){
        $("#commentDIV").toggleClass("show hide");
    });

切换DIV隐藏和显示

9 个答案: