'onclick' 存储值不起作用

Question

所以我有这个 <a> 标签：

   <a href="/book-testdrive" class="addtocart" value="YX57WDL" title="Book Test Drive">
     <i class="glyphicon glyphicon-road"></i>
     <span>&nbsp;Book Test Drive</span>
   </a>

如您所见，它被赋予了 value="YX57WDL" 的值，现在我想做的是在单击 a 标签并将其放入变量时捕获该值。

我的页面上有许多 <a> 标签，其中包含许多动态创建的不同值。如果用户按下另一个标签，我希望它存储在同一个变量中，但用唯一的 <a> 标签值替换该值。

此外，变量需要在站点范围内存储，我想解决这个问题的方法是 Web 存储 API。

到目前为止我已经尝试使用这个 Javascript:

var links = document.querySelectorAll('.addtocart ');

links.onclick = function(){
  localstorage['storedValue'] = this.value ;
}

但是当我 console.log() 链接变量时它什么都不包含。

知道为什么会这样吗？

谢谢

Answer 1

问题是 document.querySelectorAll returns 一个（非实时）节点列表。这意味着它基本上是一个数组，所以你可以为每个数组做一个循环：

for (var i = 0; i < links.length; i++) {
    links[i].onclick = function(){
        localStorage['storedValue'] = this.value ;
    }
}

另请注意，我将 localstorage 更改为 localStorage，因为它区分大小写。

Answer 2

您需要等到 DOM 加载完毕，否则如果您要查找的元素尚未添加到 [=24]，则对 document.querySelectorAll() 的调用将找不到任何内容=] 还没有。

我看到你添加了 jquery 作为标签，所以我假设你使用的是 jquery。如果是这种情况，您可以使用 jquery 函数包装您的代码以等待 DOM 准备就绪，如下所示：

$(document).ready(function() {
    var links = document.querySelectorAll('.addtocart ');

    links.onclick = function(){
        localStorage['storedValue'] = this.value ;
    }
});

此外，如果您使用的是 jquery，您可以使用它的 on 函数来简化此操作。

$(document).ready(function() {
    $('.addtocart').on('click', function() {
        localStorage['storedValue'] = this.value;
    }
});

如果您没有使用 jquery，请参阅 this 关于如何在没有 jquery $(document).ready() 函数的情况下等待 DOM 加载的问题。

Answer 3

尝试使用“.getAttribute('value')”代替“.value”：

var links = document.querySelector('a.addtocart');

links.onclick = function(){
    localStorage['storedValue'] = links.getAttribute('value');
}

Answer 4

由于您使用的是 jQuery，您可以这样做：

$("body").on("click", ".addtocart", function(e) {
    localstorage['storedValue'] = $(this).val();
});

你肯定想知道为什么你的尝试失败了。事实上，您距离解决方案并不太远，但您可能运行在创建链接之前使用脚本。使用 jQuery 的 .on() 函数，您可以监听与选择器（即 ".addtocart"）匹配的当前和未来元素。

'onclick' 存储值不起作用

'onclick' Storing Value Not Working

javascript

jquery

html

onclick

web-storage