Question

好的，看看这个。为什么这不起作用？

<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();
    }
});

http://jsfiddle.net/xt4qC/

希望根据自定义属性切换表格行，它似乎忽略了它？怎么会？一切似乎都被正确编码了？或者我错过了一些我忽略的东西。

Answer 1

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

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

Updated fiddle

您还可以缩短逻辑：

$(".toggle").click(function () {
    $('tr[data-email*="@some.com"]')[$(this).is(":checked") ? 'show' : 'hide']();
});

Answer 2

你需要像这样使用contains selector * =

所以改变

 $("tr[data-email=*'@some.com']").hide();
 //              ^^

到

 $("tr[data-email*='@some.com']").hide();

另外一个问题是RoryMcCrossan指出if语句不正确

DEMO

显示和隐藏行无效

2 个答案: