切换DIV隐藏和显示(Toggle DIV hide and show)
当我按下'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">✔ 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">✔ 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">✔ 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>但它不起作用为什么??
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">✔ 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">✔ 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">✔ 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??
最满意答案
尝试这个：
$(document).ready(function () { $('.commentButton').click(function () { $(this).next('.commentDIV').toggle(); }); }); 使用toggle（） - 显示或隐藏匹配的元素。 使用next（） - 获得commentButton的紧随其后的兄弟。Try this:
$(document).ready(function () { $('.commentButton').click(function () { $(this).next('.commentDIV').toggle(); }); }); Use toggle() - to display or hide the matched elements. Use next() - to get the immediately following sibling of commentButton.更多推荐
发布评论