我正在尝试为我的表创建一个显示-隐藏函数。问题是jQuery似乎只适用于第一个选择器,而不适用于其他选择器。
有人能帮我解决这个问题吗?
jQuery:
jQuery("document").ready(function($) {
$("#paragraph-div").hide();
$("#toggle-div").click(function() {
if ($("#paragraph-div").is(":visible")) {
$("#paragraph-div").hide();
$("#toggle-div").val("Less Info");
} else {
$("#paragraph-div").show();
}
});
});
HTML:
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a id="toggle-div">More Info</a>
<div id="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
</table>
工作小提琴
id
在同一文档中应该是唯一的,用普通类替换重复的一次,例如:
<a class="toggle-div">
<div class="paragraph-div">
代替:
<a id="toggle-div">
<div id="paragraph-div">
然后在js中使用类选择器.
,而不是id选择器:
$(".toggle-div")
$(".paragraph-div")
代替:
$("#toggle-div")
$("#paragraph-div")
注意:
- 您可以在事件中使用
$(this)
而不是".toggle-div"
- 您应该使用
$(this).next(".paragraph-div")
来选择与单击的链接相关的段落 div
标记没有val()
方法,应该使用text()
希望这能有所帮助。
代码段
jQuery("document").ready(function($) {
$(".paragraph-div").hide();
$(".toggle-div").click(function()
{
if ($(this).next(".paragraph-div").is(":visible")) {
$(this).next(".paragraph-div").hide();
$(this).text("More Info");
} else {
$(this).next(".paragraph-div").show();
$(this).text("Less Info");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td><a class="toggle-div">More Info</a><div class="paragraph-div"><p>Hidden text - Toggle more info to show.</p></div></td>
</tr>
</table>
我想你正在寻找这样的东西:
jQuery("document").ready(function($) {
$(".paragraph-div").hide();
$(".toggle-div").click(function() {
var $this = $(this);
var $paragraph = $this.next('.paragraph-div');
if ($paragraph.is(":visible")) {
$paragraph.hide();
$this.html("More Info");
} else {
$paragraph.show();
$this.html("Less Info");
}
});
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>
<a class="toggle-div">More Info</a>
<div class="paragraph-div">
<p>Hidden text - Toggle more info to show.</p>
</div>
</td>
</tr>
</table>
(另请参见此Fiddle)