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().