切换DIV隐藏和显示
[英]Toggle DIV hide and show
问题描述
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. 
我正在尝试在按下按钮'commentDIV'时切换DIV（隐藏并显示）..但是到目前为止，它仍然无法正常工作...我的HTML代码在下面。 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... 我在这里想要做的是仅隐藏/显示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">✔ 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 我已经更新了代码，添加了另一个用于关闭commentDIV的按钮
Javascript is : Javascript是：
$(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?? 但是为什么不行呢？
9 个解决方案
解决方案1
4 2013-04-25 09:09:59
You need to make some changes, instead of using id use class attribute because id should be unique across a document 您需要进行一些更改，而不是使用id use class属性，因为id在整个文档中应该是唯一的
$(document).ready(function() {
$(document).on('click', '.commentButton', function() {
$(this).next('.commentDIV').toggle()
alert("xscs");
});
});
解决方案2
2 2013-04-25 09:10:17
you are using commentButton as id at present which is repeated more times ..When you are tyring to call with ID it should only one time the page. 您当前使用的是commentButton作为ID，它会重复多次。.当您尝试使用ID进行呼叫时，该页面应该只有该页面的一倍。 If you want to use multiple times it should be declared as class..So try using class 如果要多次使用，则应将其声明为class。因此，请尝试使用class
解决方案3
1 2013-04-25 09:08:20
You invoke hide() instead of toggle() . 您调用hide()而不是toggle() 。 Hide will only hide element. 隐藏只会隐藏元素。 toggle will show it when it is hidden, and hide it whe it is shown. 切换将在隐藏时显示它，并在显示时隐藏它。
This syntax $('#commentDIV') is responsible for finding element with id commentDIV. 此语法$('#commentDIV')负责查找ID为commentDIV的元素。 Id element should be unique in HTML, so jquery assumes that it is only one. id元素在HTML中应该是唯一的，因此jquery假定它只是一个。
解决方案4
1 已采纳 2013-04-25 09:10:53
Try this: 尝试这个：
$(document).ready(function () {
$('.commentButton').click(function () {
$(this).next('.commentDIV').toggle();
});
});
解决方案5
1 2013-04-25 09:12:22
jQuery comes with another method that exactly does what you need: .toggle() jQuery附带了另一种完全满足您需求的方法： .toggle()
However, your HTML uses the same ID "commentDIV" more than once. 但是，您的HTML多次使用相同的ID“ commentDIV”。 Consider converting these into classes, or us another selector to select the one div you want to toggle. 考虑将它们转换为类，或使用另一个选择器选择要切换的一个div。
解决方案6
1 2013-04-25 09:15:15
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。
So change id="commentDIV" to class="commentDIV" and try. 因此，将id =“ commentDIV”更改为class =“ commentDIV”并尝试。
Code: 码：
$('.commentButton').click(function() {
var commentDiv = $(this).closest('tr').find('.commentDIV');
if (commentDiv.is(":visible")) {
commentDiv.hide();
} else {
commentDiv.show();
}
alert("xscs");
});
解决方案7
1 2013-04-25 09:24:09
Here's an edit to your fiddle which demonstrates the answer that everyone else is saying: 这是对您的小提琴的编辑，它演示了其他所有人在说的答案：
http://jsfiddle.net/h4G6N/1/ http://jsfiddle.net/h4G6N/1/
Here's a sample of the updated HTML: 这是更新的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>
Here's the JS: 这是JS：
$(function() {
$('.comment-button').click(function() {
$(this).next(".comment-block").toggle();
alert("xscs");
});
});
Essentially: you need to use class selectors instead of an ID selector, since your IDs aren't unique (that's a whole other problem). 本质上：您需要使用类选择器而不是ID选择器，因为您的ID不是唯一的（这是另一个问题）。
解决方案8
0 2013-04-25 09:12:20
DEMO:: 演示：：
http://jsfiddle.net/Praveen16oct90/KesY6/ http://jsfiddle.net/Praveen16oct90/KesY6/
Use This coding and try it works 使用此编码并尝试使用
$(document).ready(function() {
$('#commentButton').click(function() {
$('#commentDIV').toggle();
});
});
解决方案9
0 2013-04-25 09:16:20
jQuery deprecated toggle() method. jQuery 不推荐使用 toggle()方法。 Better use .toggleClass() instead. 最好改用.toggleClass() 。
.show{
display: block;
}
.hide{
display:none;
}
$("#commentButton").click(function(){
$("#commentDIV").toggleClass("show hide");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.