点击更改儿童字体颜色？

Question

尝试在点击时更改字体颜色，但遗憾的是它不会改变。这样做的正确方法是什么？

$("#hepsi").click(function(){

$(this).removeClass('boskolon2').addClass('boskolon').siblings('.boskolon').removeClass('boskolon').addClass('boskolon2');
$(this).children("img").not("img.profimg").hide();
$(this).children("font").css({color: 'red'});

});

HTML

<div id="hepsi" class="boskolon2">
<img class="profimg" src="misal.png" width=36 \><div>
<b><font id="probas">AkifFF</font></b><br>22, Mersin</div>
</div>

Answer 1

使用.find()代替.children()，注意.children()只能在DOM树中向下移动一个级别。

$(this).find("font").css({"color": 'red'});

Answer 2

使用toggleClass，当你想改变颜色，或者某些css规则不用js做，比css慢

$("#hepsi").click(function(){
   $(this).toggleClass('myColor');
});

css代码

.bosklon {
   color: ...;
 }

.bosklon.myColor{
  color : ...;
 }

HTML

<div id="hepsi" class="bosklon">
<img class="profimg" src="misal.png" width=36 \><div>
<b><font id="probas">AkifFF</font></b><br>22, Mersin</div>
</div>

Answer 3

我认为html 5不支持字体标记，所以我使用CSS代替字体标记，你可以使用： $(this).children("b").css({color: 'red'});

并删除字体标记。

干杯