使用带双引号的数据值属性的 jQuery 选择器

Question

我正在学习 UI 自动化测试，我一直在尝试定位这个元素

<a tabindex="-1" href="javascript:void(0)" data-value="{"stringVal":"date-desc-rank"}" id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a>

在网页上使用其“数据值”属性。

但是当我运行以下命令时：

$('a[data-value="{"stringVal":"date-desc-rank"}"]')

它返回一个错误：

未捕获的 DOMException：Document.querySelector：'a[data-value="{"stringVal":"date-desc-rank"}"]' 不是有效的选择器

我还尝试用反斜杠符号转义双引号，但没有结果。

任何帮助将不胜感激。

Answer 1

您需要在 html 中使用单引号来包装 json 并在 jQuery 选择器中使用转义引号。另一种方法是使用$('a[data-value]').filter(function)并检查回调中的数据。当数据属性包含有效的 json 时，jQuerydata()会自动为您将其解析为对象/数组。// this version changes the text$('a[data-value=\'{"stringVal":"date-desc-rank"}\']').text('Inserted text');// this version changes the color$('a[data-value]').filter(function(){&nbsp;&nbsp;&nbsp; &nbsp;return $(this).data('value').stringVal === "date-desc-rank"}).css('color', 'red');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><a tabindex="-1" href="javascript:void(0)" data-value='{"stringVal":"date-desc-rank"}' id="s-result-sort-select_4" class="a-dropdown-link">Release Date</a>

Answer 2

当我想将它存储在中时，我使用encodeURIComponent来编码data-我有一些关于 String 对象的原型来简化这个过程。String.prototype.encode = function() { return encodeURIComponent(this).replace(/'/g,'%27');};String.prototype.decode = function() { return decodeURIComponent(this); };`{"stringVal":"date-desc-rank"}`.encode(); //%7B%22stringVal%22%3A%22date-desc-rank%22%7D<a data-value="%7B%22stringVal%22%3A%22date-desc-rank%22%7D">Release Date</a>此处另一个答案的旁注，您也可以在选择器中使用属性，无需过滤。$(`a[data-value="%7B%22stringVal%22%3A%22date-desc-rank%22%7D"]`).css('color', 'red');尽管您可能想考虑为选择器使用更简单的属性，而不是整个字符串化对象。