首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >显示和隐藏不起作用的行

显示和隐藏不起作用的行
EN

Stack Overflow用户
提问于 2014-01-08 00:10:43
回答 2查看 33关注 0票数 1

好了,看看这个。为什么这不起作用?

代码语言:javascript
复制
<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:

代码语言:javascript
复制
$(".toggle").click(function () {
    if ($(this).attr("checked") == true) {
        $("tr[data-email=*'@some.com']").show();
    } else {
        $("tr[data-email=*'@some.com']").hide();
    }
});

http://jsfiddle.net/xt4qC/

希望根据自定义属性切换表行,但似乎忽略了它?怎么会这样?一切似乎都被正确地编码了?还是我遗漏了一些我忽略的东西。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-08 00:13:28

首先,选择器是错误的。它应该是*=而不是=*。其次,使用is(':checked')而不是读取checked属性。试试这个:

代码语言:javascript
复制
$(".toggle").click(function () {
    if ($(this).is(":checked")) {
        $("tr[data-email*='@some.com']").show();
    } else {
        $("tr[data-email*='@some.com']").hide();
    }
});

您还可以缩短逻辑:

代码语言:javascript
复制
$(".toggle").click(function () {
    $('tr[data-email*="@some.com"]')[$(this).is(":checked") ? 'show' : 'hide']();
});
票数 2
EN

Stack Overflow用户

发布于 2014-01-08 00:12:00

您需要像这样使用*=中的contains selector

所以改变吧

代码语言:javascript
复制
 $("tr[data-email=*'@some.com']").hide();
 //              ^^

代码语言:javascript
复制
 $("tr[data-email*='@some.com']").hide();

还有一个问题,RoryMcCrossan指出if语句是不正确的

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20976423

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档