我正在尝试为我的 table 制作一个显示隐藏功能。问题是 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>
最佳答案
<强> Working fiddle
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>
关于javascript - jQuery 显示/隐藏仅适用于第一个选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36388669/