显示和隐藏不起作用的行
显示和隐藏不起作用的行
提问于 2014-01-08 00:10:43
好了，看看这个。为什么这不起作用？
<table>
<tr data-email='some1@some.com'>
<td>some1</td>
</tr>
<tr data-email='some2@some.com'>
<td>some2</td>
</tr>
<tr data-email='some3@some.com'>
<td>some3</td>
</tr>
<tr data-email='some4@some.com'>
<td>some4</td>
</tr>
<tr data-email='some1@any.com'>
<td>any1</td>
</tr>
<tr data-email='some2@any.com'>
<td>any2</td>
</tr>
</table>
<input type='checkbox' name='toggle' class='toggle' value='1' checked>还有我的JS：
$(".toggle").click(function () {
if ($(this).attr("checked") == true) {
$("tr[data-email=*'@some.com']").show();
} else {
$("tr[data-email=*'@some.com']").hide();
}
});希望根据自定义属性切换表行，但似乎忽略了它？怎么会这样?一切似乎都被正确地编码了？还是我遗漏了一些我忽略的东西。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-08 00:13:28
首先，选择器是错误的。它应该是*=而不是=*。其次，使用is(':checked')而不是读取checked属性。试试这个：
$(".toggle").click(function () {
if ($(this).is(":checked")) {
$("tr[data-email*='@some.com']").show();
} else {
$("tr[data-email*='@some.com']").hide();
}
});您还可以缩短逻辑：
$(".toggle").click(function () {
$('tr[data-email*="@some.com"]')[$(this).is(":checked") ? 'show' : 'hide']();
});Stack Overflow用户
发布于 2014-01-08 00:12:00
您需要像这样使用*=中的contains selector
所以改变吧
$("tr[data-email=*'@some.com']").hide();
// ^^至
$("tr[data-email*='@some.com']").hide();还有一个问题，RoryMcCrossan指出if语句是不正确的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20976423
复制相关文章
相似问题
腾讯云开发者
