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

Question

我有一个活动选项卡的自动播放选项卡类current，这意味着当选项卡是活动的时，列表项有一个名为current的类。

现在我要向第一个子

添加不同的类

null

$(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>

null

Answer 1

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

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

我还为正在添加的类添加了一些简单的CSS，这样无论代码工作与否，都更容易可视化。

null

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>