jquery更改h4的背景颜色点击

Question

现在点击我的div .box正在将背景颜色更改为蓝色，我想申请h4的孩子，所以蓝色背景只会在div的子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/

Answer 1

更换$(this).addClass('highlight');与$("h4", this).addClass('highlight');

Answer 2

试试这个：

$(document).ready(function() { 

    var click = false; 
    $(document).on('click', '.box', function() { 
    if ($(this).find('h4').hasClass('highlight')) { 
     $(this).find('h4').removeClass('highlight'); 
     click = false; 
     return false; 
    } 
    if (!click) { 
     $(this).find("i").removeClass('red'); 
     $(this).find('h4').addClass('highlight'); 
     click = true; 
    } else { 
     $(this).find("i").toggleClass('red'); 
    } 
    }); 
}); 

Answer 3

你有两个选择这样做，要么直接选择h4您div盒子里像$('.box > h4')，或者使用find()之类的函数$('.box').find('h4')。

下面的示例。

$(document).ready(function() { 
 

 
    var click = false; 
 
    $('.box > h4').on('click', 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'); 
 
    } 
 
    }); 
 

 

 
    /* You can also do this */ 
 
    /* 
 
    $('.box').find('h4').on('click', 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'); 
 
    } 
 
    }); 
 
    */ 
 
});

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>