Jquery：语法错误，无法识别的表达式：nth-​​child()

Question

我已经使用了别人的答案来得到这个。

查询：

$("input:checkbox:not(:checked)").each(function() {
    var columnName = $(this).attr('name');
    $('td:nth-child(' + columnName + '),th:nth-child(' + columnName + ')').hide();
});

$("input:checkbox").click(function() {
    var columnName = $(this).attr('name');
    $('td:nth-child(' + columnName + '),th:nth-child(' + columnName + ')').toggle();
});

HTML：

<input type="checkbox" name="1" checked="checked"/>

当我将值放入 :nth-child(1) 时它起作用，但当我包含变量时不起作用。是我做错了还是我使用了错误的 Jquery 库。

任何帮助，将不胜感激！

Answer 1

我猜你有一个或多个<input type="checkbox" />，其中name属性是不是一个数字，或不存在。

例如：

<input type="checkbox" name="string" />

使用您的代码时，这会输出您描述的错误：

Uncaught Error: Syntax error, unrecognized expression: :nth-child

见小提琴

一种解决方法是检查这columnName是一个有效的数字：

var columnName = $(this).prop('name') || '0';

if (columnName.match(/^[1-9]\d*$/)) {
  // columnName must start with a number between 1 to 9
  // and can be proceeded by zero or more numbers only
}

此外，将 a 分配给class用于show/hide相应td/th's.

<input type="checkbox" class="showHide" name="1" />

这样，您只需选择/循环您想要的元素，而不是页面上的每个复选框。

$('input.showHide').click(function() { ... });