使用带双引号的数据值属性的 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(){  

   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');

尽管您可能想考虑为选择器使用更简单的属性，而不是整个字符串化对象。