jQuery изменить цвет фона h4 при щелчке

Question

Прямо сейчас после щелчка мой div .box меняет цвет фона на синий, я хотел бы, чтобы это применимо к детям h4, поэтому синий фон будет только у детей h4 div коробка.

ДИВ окно ни фона, когда нажата и 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> 

ЯШ:

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