如何僅爲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元素設置類？

回答

相關問題