Question

我正在尝试使用jquery / javascript镜像两个无序列表上的“活动”状态。第一个列表是滑块/轮播，第二个列表是导航链接。

E.g。

<ul class="carousel">
 <li class="active">Slider 1</li>
 <li>Slider 2</li>
 <li>Slider 3</li>
 <li>Slider 4</li>
</ul>

<ul class="nav">
 <li class="active"><a href'#">Link 1</a></li>
 <li><a href'#">Link 2</a></li>
 <li><a href'#">Link 3</a></li>
 <li><a href'#">Link 4</a></li>
</ul>

因此，我们的想法是，当轮播中<li>的活动状态发生变化时，'nav'列表中相应的<li>也会发生变化。

非常感谢任何帮助。

Answer 1

我从几个SO帖子中解决了一些问题：

$(document).ready(function() {
  $('.carousel').bind('DOMSubtreeModified', function(e) {
      $(".nav>li.active").removeClass("active");
      $(".nav>li").eq($(".carousel").index($("active"))).addClass("active");
  });
});

只需将此添加到您的Javascript及其完成中。

它的作用：首先，您将.carousel元素中的任何DOM-Changes（您已经将其更改为wp插件左右）绑定到新函数。在函数内部删除活动的li标记，然后选择活动轮播元素的索引，并使用.active .carousel标记添加到nav元素>

希望这有帮助

编辑：代码中出现了一个错误，我在测试中留下了一些不必要的行。请使用更新的代码

Answer 2

如果您无法访问Wordpress插件的代码，则无法直接执行此操作，但可以使用setTimeOut功能。这不是最干净的方法，但我想没有其他选择。

setInterval(function() {

  if ($(".carousel li").hasClass("active")) {
    var active = $(".carousel").find(".active");
    var index = $(active).index();
    index = index + 1;
    $(".nav li:nth-child(" + index + ")").addClass("active");

  }

}, 1000);

.active {
  color: red;
}
.active a {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="carousel">
  <li class="">Slider 1</li>
  <li class="active">Slider 2</li>
  <li>Slider 3</li>
  <li>Slider 4</li>
</ul>

<ul class="nav">
  <li class="">
    <a href="">Link 1</a>
  </li>
  <li><a href="">Link 2</a>
  </li>
  <li><a href="">Link 3</a>
  </li>
  <li><a href="">Link 4</a>
  </li>
</ul>

Answer 3

我在这里创建了一个工作示例：https://jsfiddle.net/aj68mogk/14/

它在JSFiddle上不起作用，因为脚本不会更改轮播.active类，这是由wp插件完成的。

我已经添加了一个链接“假”插件所做的动作（更改轮播状态）。代码中有一个错误，它获得了活动轮播的索引。

所以请忽略我的第一个答案的代码，然后选择JSFiddle的代码。但是，不要忘记在页面上使用它时删除虚假链接及其点击功能

接下来你必须在JSFiddle上选择一个Jquery版本，否则永远不会输入$(document).ready()函数，因为它不是纯粹的js。

希望这有帮助，如果还有问题，请发表评论

在两个单独的HTML元素上链接“活动”状态

3 个答案: