jQueryを使用してクリックした要素のスタイルを変更し、同じクラスの他の要素からそのスタイルを削除する

Question

EDIT：修正済み！私のHTMLを投稿すると言った人のおかげで - 私はそれを見て、私は "appname"クラスを2回持っていたことに気付かなかった。

<li class="<?php echo $apid; ?> appname appname_getinfo appname_<?php echo $apid; ?>"> 
     <span class="appname"><?php echo $apname; ?></span> 
</li> 

だから、私は "" を削除し、それが動作します！

は、私はクラスと三つの要素を持っていると言う：

EL ONE

EL TWO

EL THREE

私はEL ONEをクリックすると、私はそれをしたいと思い大胆な。 EL TWOをクリックすると太字になり、EL ONEは普通の重量になります。次にEL THREEをクリックすると太字になり、EL TWOは通常の重みになります。

MY SCRIPT：

//// app info //// 
$("li.appname_getinfo").click(function(){ 

    var appID = this.className.split(' ')[0]; 
    $.get("wishlist/appinfo.php?pw=R32kd63DL&apid=" + appID, function(data){         
     $("div#appinfo").html(data);        
    }); 

    $("div#appinfo").show(); 

    $(".appname").css("font-weight", "normal"); 
    $(this).css("font-weight", "bold"); 


}); 

私は、通常のクラス "APPNAME" ですべてを設定し、その後、大胆に$（this）を変更するが、それは動作しないことができると考えました。 （太字にすることはできません）。

Answer 1

最初のことは、経験則として、jsから直接cssではないクラスを追加します。第二に、".appname"に大胆なルールを適用しています。"li.appname_getinfo"

Answer 2

各アイテムにハンドラを追加するには、$().eachを使用する必要があります。

$('.appName').each(
    function(index, item){ 
    $(item).click(
     function(e) { 
     $('.appName').css('fontWeight', 'normal'); 
     $(this).css('fontWeight', 'bold'); 
    }); 
}); 

がChromeでテストされ、私は問題がある疑いがある一方で前述したように、一つの他の理由があるため可能性がありますが、クラス名の不一致を

Answer 3

を記述するように動作するようです：私のコードです"li"要素の内部にコンテナがあり、そのコンテナはfont-weight normalに設定されています。 LI要素の太字を設定していますが、その中の要素が通常のフォントの場合、LIに設定すると何も行われません。

... 
<style> 
span { font-weight:normal; } 
</style> 
... 
<ul> 
    <li class="appName"><span>this text will not bold when you bold the LI because it's in a span, and spans are styled with normal font-weight</span> 
    </li> 
<ul> 

役立つChromeの開発ツール ...