变量不起作用

Question

由于某种奇怪的原因，下面的代码不起作用。

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

一些事实：

1. localStrorage

   工作正常 -

   localStorage.getItem('position')

   输出正确的值。这里没有错误。

2. current_position

   是一个数字（1、2、3...等）。如果我手动设置，例如

   '2'

   ，如下所示：

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

   然后代码就可以正常工作了。但如果我将

   '2'

   更改为

   ' + xxx + '

   ，则不起作用。

原始问题已编辑。感谢博金德拉·尼泊尔和乔纳·威廉姆斯。

Answer 1

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

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

此外，我建议您对有效的 html5 元素使用

data-*

属性，因此使用

data-current-position

而不是

current_position

Answer 2

问题是

xxx

是一个指向本地存储的变量，而

"xxx"

只是一个字符串。 您需要将值插入到字符串中，

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

Answer 3

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

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

一切正常。