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");
  });

不起作用。有人有想法吗？

Answer 1

你有一个语法错误，将数据属性类选择器'中的"替换为data-child-field="child_has_jacket"，同样

属性选择器不能和 class 有空格，否则会搜索带有 data 属性的子元素

应该是这样的：

$('.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>

Answer 2

使用 $('.form-row[data-child-field=child_has_jacket]').addClass("selected");。 .form-row 之后检查空间被删除，否则它将开始搜索具有该数据属性的子元素。
CSS 中 ; 和 height 周围缺少 display

工作片段：

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

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

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

.form-row.selected {
  border:1px solid black;
  width:20px;
  height:20px;
  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>

其他工作片段：

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

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

根据数据属性选择元素

2 个答案: