如何选择具有在其值中包含引号的属性的 HTML 元素？

Question

我有一个 HTML 元素，现在我必须使用 jQuery 或 javascript 使用 data 属性选择包含双引号或单引号的元素。

jQuery('.test-sp[data-value=""test"]').trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-value=""test">Test lppp</span>

我的数据值是 "test。我需要使用 data 属性选择 div/span，该属性的值包含引号。

Answer 1

在字符串的 " 之前使用 \。

<span data-value="\"test">Test lppp</span>

Answer 2

您可以通过为元素指定特定的类或位置来使元素更加具体，并在 JavaScript 中搜索元素。您可以访问元素的数据集属性

<ul>
  <li data-value="random">1</li>
  <li data-value="word">2</li>
  <li data-value="test">3</li>
</ul>

<script>
  // Or some other class to target them
  const elements = document.querySelectorAll('ul > li');

  for (let i = 0; i < elements.length; i += 1) {
    const el = elements[i];
    if (el.dataset.value === 'test') {
      // This is the element you are looking for!
    }

  }
</script>

Answer 3

我的数据值是“测试”。

不是根据你的标记。

<span data-value=""test">Test lppp</span>

等同于：

<span data-value="" test"="">Test lppp</span>

您可以在 sn-p 中轻松检查自己：

console.log(
    document.querySelector('[data-value]').outerHTML
)

<span data-value=""test">Test lppp</span>

引号和双引号是独立属性上的无效字符。在继续之前，您应该 fix 您的标记。

Answer 4

将 html 和 script 标签中 data-attribute 的值用单引号括起来。如果您使用单引号将值括起来，它将接受带引号的值。

对于单击事件，您必须在脚本标记中使用反斜杠转义数据属性的值。

我在脚本中使用一个变量从 span 标签中获取数据属性，它具有双引号的值，您也可以传递单引号。它正在工作。

这是工作代码。

var dattrvalue = $(".spn").attr("data-value");
$("span[data-value='" + dattrvalue + "']").click(function(event) {
  $("#para").html("Hurray!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="spn" data-value='"test'>Click Me</span>

<p id="para">This is a paragraph tag!</p>