如果另一个列表项具有特定的类，如何添加列表项？

Question

对于活动选项卡，我有一个自动播放选项卡类当前，这意味着当选项卡处于活动状态时，列表项有一个名为current的类。

现在我想将不同的类添加到第一个子<li class="li-animation"></li>中

​

$(document).ready(function(jQuery) {

  if ($('li.stp-1').hasClass('current')) {
    $('.li-animation').addClass('hover-1');
  } else {
    $('.li-animation').removeClass('hover-1');
  }

  if ($('li.stp-2').hasClass('current')) {
    $('.li-animation').addClass('hover-2');
  } else {
    $('.li-animation').removeClass('hover-2');
  }
});

$(document).ready(function(jQuery) {
  $(function () {
    var boxes = $(".HWBlock"),
      tabs = $(".tablinks");

    function showTabContent() {
      return boxes.queue("tabs", $.map(boxes, function (el, curr) {
        return function (next) {
          boxes.hide() // hide `.box` elements
            .add(tabs) // add `.tabs` to current selector
            .removeClass("current") // remove `.current` class
            .filter(el) // current `.box` element
            .fadeIn(150) // fade in current `.box` element
            .add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
            .addClass("current") // add `current` `className` to selector
            .end() // end current selection at `.boxes` selector
            .delay(5000, "content") // set, delay `"content"` queue 5000ms
            .dequeue("content") // dequeue `"content"` queue
            .promise("content") // at completed promise of `"content"` queue
            .then(next) // call next function in `"tabs"` queue
        }
      }))
        .dequeue("tabs") // dequeue `"tabs"` queue
        .promise("tabs") // at completed promise of `"tabs"` queue
        .then(showTabContent); // call `showTabContent` recursively
    }
    showTabContent();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="d-md-flex wow fadeInDown">
  <li class="li-animation"></li>
  <li class="tablinks stp-1">stp-1</li>
  <li class="tablinks stp-2">stp-2</li>
  <li class="tablinks stp-3">stp-3</li>

</ul>
<div class="how-works-text wow fadeInUp">
  <div class="HWBlock step-1" id="step-1">
    <p>test</p>
  </div>
  <div class="HWBlock step-2" id="step-2">
    <p>test 2</p>
  </div>
  <div class="HWBlock step-3" id="step-3">
    <p>test 3</p>
  </div>
</div>

​

Answer 1

根据你在问题和评论中给我们的非常有限的信息，这是一个绝对的猜测什么可能有效，根据你给我们的有限的信息。这完全是基于我对jQuery的效果排队功能的了解，这是有限的。

我还冒昧地使用toggleClass来减少代码的长度，在元素中添加或删除带有“li-动画”类的“悬浮-*”类。

我还为要添加的类添加了一些简单的CSS，以便更容易地可视化代码是否有效。

​

function addHoverClasses() {
  $('.li-animation').toggleClass('hover-1', $('li.stp-1').hasClass('current'));
  $('.li-animation').toggleClass('hover-2', $('li.stp-2').hasClass('current'));
  $('.li-animation').toggleClass('hover-3', $('li.stp-3').hasClass('current'));
}

$(document).ready(function(jQuery) {
  $(function () {
    var boxes = $(".HWBlock"),
      tabs = $(".tablinks");

    function showTabContent() {
      return boxes.queue("tabs", $.map(boxes, function (el, curr) {
        return function (next) {
          boxes.hide() // hide `.box` elements
            .add(tabs) // add `.tabs` to current selector
            .removeClass("current") // remove `.current` class
            .filter(el) // current `.box` element
            .fadeIn(150) // fade in current `.box` element
            .add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
            .addClass("current") // add `current` `className` to selector
            .queue(function (next) {
              addHoverClasses();
              next();
            })
            .end() // end current selection at `.boxes` selector
            .delay(5000, "content") // set, delay `"content"` queue 5000ms
            .dequeue("content") // dequeue `"content"` queue
            .promise("content") // at completed promise of `"content"` queue
            .then(next) // call next function in `"tabs"` queue
        }
      }))
        .dequeue("tabs") // dequeue `"tabs"` queue
        .promise("tabs") // at completed promise of `"tabs"` queue
        .then(showTabContent); // call `showTabContent` recursively
    }
    showTabContent();
  });
});

.current { border: 1px solid green; }
.hover-1 { background-color: blue; }
.hover-2 { background-color: red; }
.hover-3 { background-color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="d-md-flex wow fadeInDown">
  <li class="li-animation"></li>
  <li class="tablinks stp-1">stp-1</li>
  <li class="tablinks stp-2">stp-2</li>
  <li class="tablinks stp-3">stp-3</li>

</ul>
<div class="how-works-text wow fadeInUp">
  <div class="HWBlock step-1" id="step-1">
    <p>test</p>
  </div>
  <div class="HWBlock step-2" id="step-2">
    <p>test 2</p>
  </div>
  <div class="HWBlock step-3" id="step-3">
    <p>test 3</p>
  </div>
</div>

​