javascript - 根据数据属性选择元素

Question

我有以下 html，我正在尝试通过 data 属性向它添加一个类：

<p class="form-row form-row-wide" data-child-field="child_has_jacket">
</p>

使用 jquery 我试过：

jQuery(document).ready(function( $ ){
       $('.form-row [data-child-field='child_has_jacket']').addClass("selected");
  });

不工作。任何人的想法？

标签： javascriptjquerycsscustom-data-attribute

Answer 1

您有语法错误，请替换 数据属性类选择器中的'by ，也"data-child-field="child_has_jacket"

属性选择器在类中不能有空格，否则会搜索具有数据属性的子元素

它应该是这样的：

$('.form-row[data-child-field="child_has_jacket"]')

见片段：

jQuery(document).ready(function( $ ){
       $('.form-row[data-child-field="child_has_jacket"]').addClass("selected").html("selected class added");
  });

.form-row.selected {
  border:1px solid black;
  display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-wide" data-child-field="child_has_jacket">
</p>