变量不起作用

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 + '，则无效。

原始问题已修改。感谢Bhojendra Nepal和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++)
{
    // ...
}

此外，我建议您对有效的html5元素使用data-*属性，因此请使用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+ "']");

一切正常。