如何选择属性值中带有引号的 HTML 元素？

问题描述

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

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，该属性的值包含引号。

解决方法

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

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

,

您可以通过为元素指定特定类或位置来使元素更加具体，并在 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>

,

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

,

我的数据值为“test.

不是根据您的标记。

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

等同于：

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

您可以在片段中轻松检查自己：

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

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

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