如何仅为img元素设置类？

我使用的是Cycle2 Carousel plugin，这个插件为我的缩略图设置了一个类，它到目前为止不是okey，因为这个插件设置了.cycle-pager-active class image和div，这就是为什么我必须设置这个类只用于images.if你看看我的#thumbnail你会看到身体标签的底部（检查元素）我得解决这个问题我应该怎么做？如何仅为img元素设置类？

我试过了吗？

我改变这一行

pagerActiveClass: 'cycle-pager-active',

这一行：

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

，但没有happend

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

来源

2017-08-24 ani_css

我不明白你在问什么。 –

cycle2为'＃thumbnail' div中的所有元素设置'.active-cycle-pager'类，但我只想为图像设置 –

难道你不能只在'＃thumbnail'里面创建一个新的'div' 'img'在里面？ –

即使我认为更好的办法是玩弄你的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

来源

2017-08-24 07:25:16

感谢Sam Battat和演示不开放 –

它现在工作吗？ –

没有页面总是刷新 –

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

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

您的代码将仅在活动类添加到内容#thumbnail内

来源

2017-08-24 07:15:06

如何仅为img元素设置类？

回答

相关问题