时间戳

首页 > 解决方案 > querySelector 抛出错误，现在数据格式已更改

javascript - querySelector 抛出错误，现在数据格式已更改

问题描述

当用户选择各种按钮时，我正在使用查询选择器来读取输入，然后按钮具有这些选项并且工作正常：

8x10 英寸

12x16 英寸

20x24 英寸

然后我将选项更新为这种格式：

8" x 10"

12" x 10"

20" x 24"

现在我得到这个错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'button[data-value="12" x 16""]' is not a valid selector.

这是我的 querySelector 脚本：

    <script>
  window.addEventListener('load', function(){
    var rad = document.querySelectorAll('.swatch input[type="radio"]');
    var prev = null;
    for (var i = 0; i < rad.length; i++) {
        rad[i].addEventListener('change', function() {
            (prev) ? console.log(prev.value): null;
            if (this !== prev) {
                prev = this;
            }
            console.log(this.value)
            document.querySelector('button[data-value="'+this.value+'"]').click()
        });
    }
    
//     (function() {
//       jQuery('.swatch :radio').change(function() {
//         var optionIndex = jQuery(this).closest('.swatch').attr('data-index');
//         var optionValue = jQuery(this).val();
//       });
//     });

  })

</script>

我正在尝试让脚本读取包含引号的新格式。

我希望这是有道理的。如果你能帮忙，谢谢。

戴尔。

标签： javascripthtml

解决方案

'您可以通过在 every或"反斜杠前面来转义字符串。

所以你可以做document.querySelector('button[data-value="'+this.value.replace(/"/, '\\"')+'"]').click()` 来确保每个双引号前面都有一个反斜杠。但是，如果你有单引号或其他不允许的字符，你可能仍然会遇到问题。

另一种选择是滥用JSON.stringify()：

document.querySelector('button[data-value='+JSON.stringify(this.value)+']').click()

请注意，您不再需要在字符串的一侧添加引号，因为它们由JSON.strinfigy().

推荐阅读