jquery - 如何使用 jQuery 添加和删除事件类？

Question

我有一个无序列表。

<style>
  #button1 { position:relative; z-index: 3; }
  #button2 { position:relative; z-index: 2; }
  #button3 { position:relative; z-index: 1; }
</style>

<ul>
  <li id="button1">Button 1</li>
  <li id="button2">Button 2</li>
  <li id="button3">Button 3</li>
</ul>

我目前正在使用 css 为每个 id 提供不同的 z-index，以便一个按钮稍微位于下一个按钮之上。我想要做的是使用 jQuery 添加一个类，为单击的任何按钮(例如“999”)添加更高的 z-index，以确保它将位于其他两个按钮之上。我不知道如何将事件类添加到当前单击的 <li>同时从当前设置的任何按钮中删除事件类。我不知道如何让 jQuery 找出另外两个中的哪一个 <li>在按下新按钮之前已设置事件类。我该如何去做呢？

此外，我不确定添加类是否可以解决问题，因为我已经通过定位 <li> 设置 z 索引的 ID。也许我需要影响当前按下按钮的内联 css，以便它覆盖 id 的 css，并检查其他两个中哪一个的内联 css z-index 设置为“999”，以便它可以删除它们内联 css 并具有比其他两个按钮更大的 z-index 并显示在顶部？

Answer 1

让科比的回答更进一步。如果可能的话，我会给 li 一些公共(public)类或者 ul 上的 id。

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.removeClass('active');
    $(this).addClass('active');
});

如果您根据 ID 设置 z-index，则 ID 的 css 规则可能会优先于任何基于类的规则。您也可以将 z-index 属性内联并使用 jQuery 进行更改。

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1.
    $(this).css('z-index', 999);
});