비활성/활성 상태의 이미지 클래스 토글

Question

내 js와 저항에 대해 아직 막 올라오고 있습니다. 미리보기 이미지가 있습니다. 첫 번째 클래스는 활성 클래스로 시작하고 나머지 클래스는 비활성 클래스로 시작합니다. 클릭하면 엄지 손가락을 클릭하면 활성 상태로 전환되고 이전 상태는 비활성 상태로 전환됩니다. 또한 비활성 클래스에 대한 호버 효과가 필요합니다. 지금, 나는 활성 클래스를 추가 할 수 있습니다,하지만 난

jQuery(document).ready(function($) { 
$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){ 
if ($(this).find(".toplevel").hasClass("inactivethumb")) { 
$('img', this).toggleClass("activethumb inactivethumb"); 

} 
}), 

$('.groomsmen_thumbs, .bridesmaid_thumbs') 
.on("mouseenter", function() { 
$(this).find(".inactivethumb.toplevel").animate({"opacity": "1"}, "fast"); 
}) 
.on("mouseleave", function() { 
$(this).find(".inactivethumb.toplevel").animate({"opacity": "0"}, "fast"); 

}) 
}); 

링크가 jQuery의 활성 및 이전 사용하려면이

<li><a href="#" class="groomsmen_thumbs"><img src="images/groom_thumb1_0.jpg"/><img class="toplevel activethumb" src="images/groom_thumb1_1.jpg"/></a></li> 

Answer 1

시도처럼 보이는 이전 활성 클래스 전환하는 방법을 알아낼 질수 :

를

JS :

$(document).ready(function(){ 
var active = $(".active"); 
var next = active.next('img'); 
active.click(function(){ 
    active.removeAttr('class'); 
    next.addClass('active'); 
    }); 
}) 

HTML :

<ul> 
<li> 
<img src="1.jpg" class="active"/> 
<img src="2.jpg" class=""/> 
</li> 
</ul> 

Answer 2

toggleClass을 사용하는 방법은 inactivethumb 및 activethumb 클래스를 모두 추가하는 중입니다. 당신이 그것을 사용하고 있다면 switchClass (jQuery UI) 같은 것을 원한다.

$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){ 
var toplevel = $(this).find(".toplevel"); 
if(toplevel.hasClass("inactivethumb") 
{ 
toplevel.removeClass("inactivethumb").addClass("activethumb"); 
} 
}); 

더 짧은 다른 모든 imgs이 inactivethumb 클래스로 시작 가정 : 여기에 일반 jQuery로 대안이다

$(".groomsmen_thumbs, .bridesmaid_thumbs").click(function(){ 
    $(this).find(".toplevel").toggleClass("inactivethumb").toggleClass("activethumb"); 
    }); 

이것을 inactive 클래스를 제거하고 click에 activeclass을 추가합니다.