jquery - 显示和隐藏行不起作用

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