使用jQuery更改單擊元素的樣式並將該樣式從具有相同類的其他元素中刪除

Question

編輯：修復它！ 感謝那些說發布我的HTML的人-我看着它，卻沒有意識到我有兩次“ appname”類。

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

因此，我刪除了“”，它起作用了！

假設我上課有三個要素：

EL ONE

兩次

三三

當我單擊EL ONE時，我想使其加粗。 當我單擊EL TWO時，它應該變成粗體，而EL ONE應該變成正常的重量。 當我接下來單擊EL THREE時，它應該變成粗體，而EL TWO 2變成正常的重量。

我的腳本：

//// 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的開發工具將幫助...