jQuery問題針對存在多個實例的clicked元素

Question

我在葯丸上有多個實例，我試圖將一個類添加到被單擊的類中，並且僅添加到該類中。

這是一個例子：

實例一

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>

實例二

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>

我有這個功能：

toggleActive(this) {
    $(this).addClass('active');
}

基本上發生的事情是我單擊第二個實例的實例，例如，它正在改變第一個實例的葯丸。

我需要它只是影響clicked元素，而不影響其他元素。

我怎樣才能做到這一點？

Answer 1

除非您在全局級別的某個地方定義它，否則$event將是undefined 。 即使您已定義它，它也不會包含有關代碼所期望的引發事件的任何有用信息，因此$(this)並非您所期望的。

要解決此問題並改進代碼，請完全停止使用on*事件屬性，並毫不干擾地附加事件處理程序。 由於您已經在使用jQuery，因此您可以執行以下操作：

 $('.nav-pills li a').click(function() { $(this).toggleClass('active'); // note toggleClass here, to allow selection/deselection }); 

 .active { background-color: #C00; color: #FFF; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav nav-pills"> <li><a data-toggle="tab" href="#contentone" class="active">One</a></li> <li><a data-toggle="tab" href="#contenttwo">Two</a></li> </ul> <ul class="nav nav-pills"> <li><a data-toggle="tab" href="#contentone" class="active">One</a></li> <li><a data-toggle="tab" href="#contenttwo">Two</a></li> </ul> 

Answer 2

如果要使用功能toggleActive（）

  $(function () { toggleActive = function (e) { $("a").removeClass('active') $(e).addClass('active'); }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav nav-pills"> <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive(this)">One</a></li> <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive(this)">Two</a></li> </ul> 

您可以先刪除所有活動類別，然后將活動類別添加到單擊的項目