Wie setze ich die Klasse nur für das Element img?

Question

Ich benutze Cycle2 Carousel plugin und dieses Plugin setzt eine Klasse für meine Thumbnails, es ist nicht okey so weit, weil dieses Plugin .cycle-pager-active Klasse Bild und div, deshalb muss ich diese Klasse nur für Bilder setzen.Wenn Sie es auschecken meine #thumbnail div bottom des Body-Tags, das Sie sehen werden (inspect-Element) Ich muss dieses Problem beheben, was soll ich tun?

Was habe ich ausprobiert?

ich ändern Sie diese Zeile

pagerActiveClass: 'cycle-pager-active', 

mit dieser Zeile:

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

aber nichts passiert

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

Auch wenn ich denke, ein besserer Ansatz mit Ihrem HTML zu spielen, um ist, und stellen Sie sicher, dass die Thumbnails div wird nur nur hinzufügen, verwendet für Bilder, hier ist eine Lösung, um buchstäblich zu erreichen, was Sie für :)

ändern Sie die addClass Methode

(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; 
    }; 
})(); 

dann auf 01 hören gefragtEreignis und entfernen Sie die aktive Klasse von nicht img Elemente

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

Erstellen Sie einfach eine div, die das Thumbnail div als Kind haben wird.

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

Ihr Code wird die aktive Klasse auf den Inhalt innerhalb des #thumbnail