示例：

Question

我需要能够通过函数传递变量，然后让该变量确定将使用dataset中的哪些数据。

我通过要定位的元素，要检查的typ中的数据，最后是dataset。

true/false

我正在尝试检查function checkTileData(tile, data, bool) { let dest = document.querySelectorAll('[data-number="'+tile+'"]'); if (dest[0].dataset.data == bool) { return "yes!"; } else { return "no"; } } console.log(checkTileData(25,"passable",true));属性是否等于data-passable。这是目标元素：

true

然而，即使目标元素上有<div class="tile" data-tile="floor" data-number="25" data-passable="true" data-row="3" data-col="5"></div>，该函数也始终返回"no"。谢谢。

Answer 1

您需要使用dest[0].dataset[data]而不是dest[0].dataset.data 并将您的bool变量转换为字符串bool.toString()

为什么？

data是一个动态属性，要调用它，您需要使用方括号[]

对象具有两种调用其属性的方式：

在知道特定属性称为{li>时，使用.
拥有表达式（即具有属性名称的变量）时使用[]

使用dataset属性时，这些属性将评估为字符串。

function checkTileData(tile,data, bool){
    var dest = document.querySelectorAll('[data-number="'+tile+'"]');
    if (dest[0].dataset[data] == bool.toString()){
        return "yes!";
    } else {
        return "no";
    }
}

console.log(checkTileData(25,"passable",true));

<div class="tile" data-tile="floor" data-number="25" data-passable="true" data-row="3" data-col="5"></div>

Answer 2

首先，当要访问的属性存储在变量中时，例如，您需要使用bracket notation访问对象的属性，例如：

dest[0].dataset[data]

然后，您需要注意dataset对象上存储的所有值都是strings，因此您不能直接将它们与布尔值进行比较。

function showTileData(tile)
{
    let dest = document.querySelectorAll('[data-number="'+tile+'"]');

    for (const key in dest[0].dataset)
        console.log(dest[0].dataset[key], typeof dest[0].dataset[key]);
}

showTileData(25);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

<div class="tile" data-tile="floor" data-number="25" data-passable="true" data-row="3" data-col="5"></div>

相反，您可以在bool变量上传递一个字符串，就像

checkTileData(25,"passable","true")

示例：

function checkTileData(tile, data, bool)
{
    let dest = document.querySelectorAll('[data-number="'+tile+'"]');

    if (dest[0].dataset[data] == bool)
        return "yes!";
    else
        return "no";
}

console.log(checkTileData(25, "passable", "true"));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

<div class="tile" data-tile="floor" data-number="25" data-passable="true" data-row="3" data-col="5"></div>

替代：

但是，还有一种方法可以在querySelectorAll()方法内进行所有检查。在下一个示例中，我将使用template literals：

function checkTileData(tile, data, bool)
{
    let dest = document.querySelectorAll(`[data-number="${tile}"][data-${data}="${bool}"]`);
    return (dest.length ? "yes!" : "no");
}

console.log(checkTileData(25, "passable", true));
console.log(checkTileData(25, "row", 22));
console.log(checkTileData(25, "col", 5));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

<div class="tile" data-tile="floor" data-number="25" data-passable="true" data-row="3" data-col="5"></div>

如何根据功能参数选择元素的数据集？

2 个答案:

示例：

替代：