javascript - jQuery如何过滤具有特定数据属性的元素

Question

我有一个具有以下格式的表格:

<table data-type="costTable">
    <thead>...</thead>
    <tbody>
        <tr data-grouping='category' data-category='A'>...</tr>
        <tr data-grouping='subCategory' data-category='A'>...</tr>
        <tr data-grouping='subCategory' data-category='A'>...</tr>
        ...
        <tr data-grouping='category' data-category='B'>...</tr>
        <tr data-grouping='subCategory' data-category='B'>...</tr>
        <tr data-grouping='subCategory' data-category='B'>...</tr>
        ...            
    </tbody>
</table>

最初，我添加了 class='hidden'对所有子类别行使用 jQuery。当用户单击一个类别(例如类别 A)时，我想删除从其子类别中隐藏的类，例如a1、a2 和 a3。以下代码不起作用:

$(function () {

var categoryRows = $("table[data-type='costTable'] tr[data-grouping='category']");
var subCategoryRows = $("table[data-type='costTable'] tr[data-grouping='subCategory']");
var itemRows = $("table[data-type='costTable'] tr[data-grouping='item']");
var subItem = $("table[data-type='costTable'] tr[data-grouping='subItem']");

collapseInitial(subCategoryRows);
collapseInitial(itemRows);

if (subItem){
    collapseInitial(subItem);
}

// Toggle subCategory rows:
categoryRows.click( function(){
    // Clicking on the category rows should display their subcategory
    var categoryName = $(this).data('category');

    var targettedElements = subCategoryRows.filter("[data-category=categoryName]");
    toggleElement(targettedElements);

});

});

我在浏览器中进行了一些调试，问题出在以下行:

var targettedElements = subCategoryRows.filter("[data-category=categoryName]");

当单击类别行 A 时，它应该找到具有数据类别 A 的子类别行，但什么也没找到。请注意，当我检查 targettedElements 时，它显示

r.fn.init [prevObject: r.fn.init(30)]

我还尝试了 .has 函数而不是 .filter，但这不会对返回值造成任何改变。请注意，当我硬编码具有categoryName 的类别名称时，它确实返回正确的元素。因此，即使categoryName 在控制台中显示为字符串，它也不会被替换。知道如何解决这个问题吗？

Answer 1

这只是一个字符串，您没有将其用作变量。

.filter("[data-category=categoryName]");

基本字符串连接

.filter('[data-category="' + categoryName + '"]');