时间戳

首页 > 解决方案 > 仅当内部最后一个 li 具有 .active 时才添加下一个按钮新类

jquery - 仅当内部最后一个 li 具有 .active 时才添加下一个按钮新类

问题描述

我有一个 jscarousel lite 轮播，它使用与此类似的结构

 <div id="prev-button">
      Previous
    </div>
    <ul class="thumbnails">
      <li class="" data-skus="">
        <a class="thumbnail">
          <img src="">FIRST</a>
      </li>
      <li class="" data-skus="">
        <a class="thumbnail">
          <img src="">SECOND</a>
      </li>
      <li class="" data-skus="">
        <a class="thumbnail active">
          <img src="">THIRD</a>
      </li>
    </ul>
    <div id="next-button">
      Next
    </div>

默认情况下，第一个缩略图处于活动状态，单击下一个按钮时，活动类将从第一个缩略图中删除并添加到第二个缩略图和主图像更改等。

我需要为下一个按钮添加一个类，只有当最后一个 li 有一个带有 .active 的 a 时。

就像是

 if ('ul li:last-child a.active') {
    $('.next-button').addClass('new-style');
  }

此代码无法正常工作，无法弄清楚如何解决问题。

https://jsfiddle.net/Adyyda/mdfot3ce/1/

标签： jquery

解决方案

首先，你需要在你的条件下使用 jQuery，而不仅仅是字符串，像这样

$('ul li:last-child a.active').length > 0

那么你需要通过 id (#) 而不是 class (.) 来查询按钮

$('#next-button')

所以，最后，它应该看起来像这样

if ($('ul li:last-child a.active').length > 0) {
   $('#next-button').addClass('new-style');
}

推荐阅读