Question

我正在尝试更新导航选项卡的活动状态。当标签被点击时 (newActive) 假设获得类 .active 并且前一个活动标签 (oldActive) 需要松开它。

到目前为止，我能够从 oldActive 中删除活动类，我还尝试向它添加一个类并且工作正常，但是我无法对 newActive< 进行任何更改/strong> 当我将其定义为 $(this) 或将其定义为 event.currentTarget 时。

我也没有在控制台中收到任何错误，因此我无法了解正在发生的事情。

JQuery 代码：

$('.navigation_tabs li').click( event => { let oldActive = $('.navigation_tabs li.active'); let newActive = event.currentTarget; oldActive.removeClass("active"); // this line is not working nor giving any errors newActive.addClass("active"); loadContent(data[newActive.dataset.list]); });

HTML 导航标记：

<div class="navigation"> <ul class="navigation_tabs"> <li class="active" data-list="build">Build</li> <li data-list="plan">Plan</li> <li data-list="innovate">Innovate</li> <li data-list="interact">Interact</li> <li data-list="scale">Scale</li> <li data-list="service">Service</li> <li data-list="enhance">Enhance</li> <li data-list="general">General</li> </ul> </div>

Answer 1

实际上有一个非常简单的例子。你为什么选择困难的？ event.currentTarget 的使用适用于 ES6。不适用于 jquery。

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

.active {
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
  <ul class="navigation_tabs">
    <li class="active" data-list="build">Build</li>
    <li data-list="plan">Plan</li>
    <li data-list="innovate">Innovate</li>
    <li data-list="interact">Interact</li>
    <li data-list="scale">Scale</li>
    <li data-list="service">Service</li>
    <li data-list="enhance">Enhance</li>
    <li data-list="general">General</li>
  </ul>
</div>

Answer 2

addClass 是一个 JQuery 函数，但 event.currentTarget 是一个普通的 javascript 事件，所以你可以试试这个：

$('.navigation_tabs li').click( event => {
    let oldActive = $('.navigation_tabs li.active');
    let newActive = $(event.currentTarget); // change here

    oldActive.removeClass("active");

    // this line is now working
    newActive.addClass("active");

    loadContent(data[newActive.dataset.list]);
});

JQuery addClass 方法不适用于 $(this) 元素或 event.currentTraget

2 个答案: