问题描述
我有以下 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");
});
不起作用。有人有想法吗?
解决方法
你有一个语法错误,将数据属性类选择器'
中的"
替换为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>
-
使用
$('.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");
});