0

ボタン「commentDIV」が押されたときにDIV（非表示と表示）を切り替えようとしています..しかし、これまでのところ機能していません...私のHTMLコードは以下です。私がここでやろうとしているのは、ボタンが押されている DIV ブロックのみを非表示/表示することです....ボタンを DIV にバインドする方法がわかりません....私のコードは DIV を非表示にでき、再度表示することはできません.. .そして、それは最初のcommentDIVでのみ機能していると思います.他の人では機能していません...

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

更新：ここにフィドルを追加しました

コードを更新して、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>

しかし、それはなぜ機能していませんか??

4

9 に答える 9

4

id はドキュメント全体で一意である必要があるため、id use class 属性を使用する代わりに、いくつかの変更を加える必要があります。

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

デモ:フィドル

于 2013-04-25T09:09:59.403 に答える
2

現在、commentButton を 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

hide()の代わりに呼び出しますtoggle()。Hide は要素のみを非表示にします。トグルは、非表示のときに表示し、表示されているときに非表示にします。

この構文 $('#commentDIV')は、id が commentDIV の要素を見つける役割を果たします。Id 要素は HTML 内で一意である必要があるため、jquery はそれが 1 つだけであると想定します。

于 2013-04-25T09:08:20.587 に答える
1

これを試して：

$(document).ready(function () {
    $('.commentButton').click(function () {
        $(this).next('.commentDIV').toggle();
    });
});
  1. 一致した要素を表示または非表示にするには、toggle()を使用します。
  2. next() - を使用して、 の直後の兄弟を取得しますcommentButton。
于 2013-04-25T09:10:53.277 に答える
1

jQueryには、必要なことを正確に行う別のメソッドが付属しています。.toggle()

ただし、HTML で同じ ID「commentDIV」が複数回使用されています。これらをクラスに変換するか、別のセレクターを使用して切り替えたい div を選択することを検討してください。

于 2013-04-25T09:12:22.440 に答える
0

jQueryの非推奨 toggle()メソッド。.toggleClass()代わりに使用することをお勧めします。

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

デモ：：

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

このコーディングを使用して、動作することを試してください

  $(document).ready(function() {


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

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

    });
});
于 2013-04-25T09:12:20.610 に答える