我有一个工作网页,但我想概括代码。当一个人点击一个链接时,例如 anchor #11 或 #12,名为 #t11 或 #t12 的 div 将使用这段脚本打开(或关闭):
脚本
$( "#11" ).click(function() {
$( "#t11" ).toggle();
});
$( "#12" ).click(function() {
$( "#t12" ).toggle();
});
剥离 HTML
<div class="a">
<table>
<tr><td><a id="11">Foo</a></td></tr>
<tr><td>Find out more about Foo</td></tr>
</table>
</div>
<div class="a">
<table>
<tr><td><a id="12">Bar</a></td></tr>
<tr><td>Find out more about Bar</td></tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
相关CSS
.b {
display: none;
}
这很好,但是,超过 20 个 div 就会变得复杂且难以维护。有没有办法减少代码,这样每个id都在<a>
中将切换其 <div>
?我一直在努力解决$this
但没有达到我希望的结果。
最佳答案
您可以使用匹配所有适当的 <a>
的选择器元素,以便您的点击功能将应用于所有元素。然后,您可以得到id
来自您的 <a>
的属性使用 $(this).attr('id')
标记。然后,您可以形成一个与要切换的内容的相应 id 相匹配的选择器,然后调用 .toggle()
使用该选择器的方法。
$('.a table tr td a').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
编辑
您还可以考虑向您的实际 <a>
添加一个类标签,正如 @Lelio Faieta 提到的。
在上面的示例中,如果 html 的结构发生变化, $('.a table tr td a')
选择器将损坏,并且点击功能将丢失。
但是,如果您分配一个类,例如 toggler
给每个<a>
标签,那么你只需替换$('.a table tr td a')
即可选择器 $('.toggler')
如果您更改 <a>
的位置,您的点击功能仍然有效。 html 中的标签。
$('.toggler').click(function() {
var id = $(this).attr('id');
var selector = '#t' + id;
$(selector).toggle();
});
.b {
display: none;
}
a:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<table>
<tr>
<td><a id="11" class="toggler">Foo</a>
</td>
</tr>
<tr>
<td>Find out more about Foo</td>
</tr>
</table>
</div>
<div class="a">
<table>
<tr>
<td><a id="12" class="toggler">Bar</a>
</td>
</tr>
<tr>
<td>Find out more about Bar</td>
</tr>
</table>
</div>
<div class="b" id="t11">
<p>More info about Foo</p>
</div>
<div class="b" id="t12">
<p>More info about Bar</p>
</div>
关于javascript - 独立于 id 的 jQuery 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32378954/