Question

我正在使用Cycle2 Carousel plugin并且这个插件为我的缩略图设置了一个类到目前为止它不是okey因为这个插件设置.cycle-pager-active类的图像和div这就是为什么我必须只设置这个类如果你看看身体标签的#thumbnail div底部你会看到（检查元素）我必须解决这个问题我该怎么办？

我尝试了什么？

我改变了这一行

pagerActiveClass: 'cycle-pager-active',

这一行：

pagerActiveClass: 'img.cycle-pager-active',

但没有任何事情发生

$(document).ready(function(){

   $(".mySlideShow").cycle({
       pauseOnHover: true,
       pagerActiveClass: 'cycle-pager-active',
       pager: "#thumbnail",
       pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
       slides: ".item"
    });
  
});

.mySlideShow img{
  width:700px;
}
#thumbnail img {
  margin:10px;
}
.cycle-pager-active{
  border:3px solid orange;
}

<div class="mySlideShow">
    <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
    </div>

  <div class="item">
      <img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
  </div>
  
  <div class="item">
    <img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
  </div>
</div>
  
<div id="thumbnail">
    <div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

Codepen Demo

Answer 1

即使我认为更好的方法是使用HTML，并确保缩略图div仅用于图像，这里是一个字面上实现您要求的解决方案：）

修改addClass方法

(function() {
  var originalAddClassMethod = jQuery.fn.addClass;

  jQuery.fn.addClass = function() {
    // Execute the original method.
    var result = originalAddClassMethod.apply(this, arguments);

    // trigger a custom event
    jQuery(this).trigger("cssClassChanged");

    // return the original result
    return result;
  };
})();

然后收听cssClassChanged事件并从非img元素中删除活动类

$(document).ready(function() {
  var $slider = $(".mySlideShow").cycle({
    pauseOnHover: true,
    pager: "#single-pager",
    pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
    slides: ".item",
    pagerActiveClass: "cycle-pager-active"
  });

  $("#single-pager > :not(img)").bind("cssClassChanged", function() {
    $(this).removeClass("cycle-pager-active");
  });
});

DEMO：https://codepen.io/anon/pen/ZJjEGQ

Answer 2

只需创建一个div即可将缩略图div作为孩子。

<div class="first-div">
 <h1> Nice thumbnail! </h1>
 <div id="thumbnail"></div>
</div>

您的代码只会将活动类添加到#thumbnail

中的内容中

如何只为img元素设置类？

2 个答案: