querySelector 抛出错误，现在数据格式已经改变

Question

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

8x10 英寸

12x16 英寸

20x24 英寸

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

8" × 10"

12" × 10"

20" × 24"

现在我得到这个错误：

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

这是我的查询选择器脚本：

    <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>

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

我希望这是有道理的。如果您能提供帮助，谢谢。

Answer 1

'您可以通过在 every 之前或"在反斜杠前对字符串进行转义。因此，您可以执行document.querySelector('button[data-value="'+this.value.replace(/"/, '\\"')+'"]').click()` 以确保每个双引号前面都有一个反斜杠。但是，如果您使用单引号或其他不允许使用的字符，您可能仍然会遇到问题。另一种选择是滥用JSON.stringify()：document.querySelector('button[data-value='+JSON.stringify(this.value)+']').click()请注意，您不再需要在字符串的一侧添加引号，因为它们是由JSON.strinfigy().