变量不起作用

Question

由于某些奇怪的原因，下面的代码无法正常工作。

var xxx = localStorage.getItem('position');
var foo = document.querySelectorAll("div[current_position=' + xxx + ']");
for (var i = 0; i < foo.length; i++)
{
    // ...
}

一些事实：

1. localStrorage工作正常localStrorage localStorage.getItem('position')输出正确的值。 这里没有错误。

2. current_position是一个数字（1、2、3等）。 如果我手动设置，例如'2' ，如下所示：

    var foo = document.querySelectorAll("div[current_position='2']"); 

   然后代码按预期工作。 但是，如果我将'2'更改为' + xxx + ' ，则无法使用。

原始问题已编辑。 感谢尼泊尔Bhojendra和Jonah Williams。

Answer 1

您需要将变量与字符串连接起来：

var xxx = localStorage.getItem('position');
var foo = document.querySelectorAll("div[current_position=" + xxx + "]");
for (var i = 0; i < foo.length; i++)
{
    // ...
}

此外，我建议您将data-*属性用于有效的html5元素，因此请使用data-current-position而不是current_position

Answer 2

问题是xxx是一个指向localstorage的变量，而"xxx"只是一个字符串。 您需要将值插入字符串，

document.querySelectorAll("div[current_position=" + xxx + "]");

Answer 3

好的，我自己找到了解决方案。 代码的第二行应为：

var foo = document.querySelectorAll("div[current_position='" +xxx+ "']");

和所有的作品。