現在點擊我的div .box正在將背景顏色更改爲藍色,我想申請h4的孩子,所以藍色背景只會在div的子h4中框。jquery更改h4的背景顏色點擊
格箱無背景時,點擊和 H4將獲得藍色背景
HTML:
<div class="box"><i class="fa fa-lg fa-trash"></i>
<h4>
hello world </h4>
</h4>
</div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
<h4>
hello world </h4></div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
<h4>
hello world </h4></div>
<div class="box"><i class="fa fa-lg fa-trash"></i>
<h4>
hello world </h4></div>
JS:
$(document).ready(function() {
var click = false;
$(document).on('click', '.box', function() {
if ($(this).hasClass('highlight')) {
$(this).removeClass('highlight');
click = false;
return false;
}
if (!click) {
$(this).find("i").removeClass('red');
$(this).addClass('highlight');
click = true;
} else {
$(this).find("i").toggleClass('red');
}
});
});
CSS:
.box {
float: left;
height: 100px;
width: 100px;
border: 1px solid #000;
margin-right: 10px;
}
.highlight {
background: #0000FF;
}
.fa-trash.red {
color: red;
}
.fa-trash {
color: green;
}
https://jsfiddle.net/wv4f2hda/7/
使用'$(本).find( 'H4')addClass( '亮點');' – guradio