0

I am trying to toggle DIV(hide and show) when button 'commentDIV' is pressed ..But it is not working so far...My HTML code is below. What i am trying to do here is hide/show DIV block only whose button is pressed....I don't know how to bind button to DIV....my code is able to hide the DIV not Show again...and i think it is only working for first commentDIV not for others...

<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>

Update: added a fiddle here

I have updated the code to add another button for closing commentDIV

Javascript is :

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

and new button is :

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

But it is not working why??

4

9 回答 9

4

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

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

演示：小提琴

于 2013-04-25T09:09:59.403 回答
2

您目前正在使用 commentButton 作为 id，它重复了更多次..当您想用 ID 调用时，它应该只访问页面一次。如果你想多次使用它应该被声明为类..所以尝试使用类

于 2013-04-25T09:10:17.210 回答
1

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

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 不是唯一的（这是另一个问题）。

于 2013-04-25T09:24:09.957 回答
1

尝试这个：

$(document).ready(function () {
    $('.commentButton').click(function () {
        $(this).next('.commentDIV').toggle();
    });
});
  1. 使用toggle() - 显示或隐藏匹配的元素。
  2. 使用next() - 获取紧随其后的commentButton.
于 2013-04-25T09:10:53.277 回答
1

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

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

于 2013-04-25T09:08:20.587 回答
1

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

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

于 2013-04-25T09:12:22.440 回答
1

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/

于 2013-04-25T09:15:15.100 回答
0

演示::

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

使用此编码并尝试它的工作原理

  $(document).ready(function() {


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

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

    });
});
于 2013-04-25T09:12:20.610 回答
0

jQuery已弃用 toggle()的方法。改用更好.toggleClass()。

.show{
   display: block;
}
.hide{
    display:none;
}
    $("#commentButton").click(function(){
        $("#commentDIV").toggleClass("show hide");
    });
于 2013-04-25T09:16:20.733 回答