jquery - jquery如何根据选中复选框的html5属性显示表格行

Question

嗨说我有以下html：

<input type-checkbox data-testid=@Model.TestDtos[i].Id />

<table>
  @for(var i=0; i < @Model.TestDtos[i].Count; i++)
  {
    <tr class="hidden" data-testid=@Model.TestDtos[i].Id>Show some stuff</tr>
  }
</table>

所以我想让它在选中具有匹配 data-testid 值的复选框时，表格行变得可见。

我试过：

    if ($(this).is(":checked")) {

        var testid = $(this).data('testid');
        $("tr[data-testid=testid").show();
    }

问题是 IDE 说 testid 从未使用过。我不确定如何从复选框 data-testid 中获取值并使用它来查找要显示的正确行。

Answer 1

testid是一个变量，所以这里需要使用字符串连接

$('tr[data-testid="' + testid + '"]').show()

演示：小提琴

但你真正需要的可能是

$(':checkbox').click(function(){
    var fn = this.checked ? 'show' : 'hide';
    var testid = $(this).data('testid');
    $('tr[data-testid="' + testid + '"]')[fn]();
})

演示：小提琴

Answer 2

您需要使用字符串连接来使用您的变量。您还缺少选择器末尾的方括号。试试这个：

$("tr[data-id='"+testid+"']").show();