jQuery 도구에 현재 상태 추가하기 스크롤 할 수있는 항목

Question

jQuery 도구를 사용할 수 있습니다. 스크롤 가능 브라우저를 잠깐 사용하여 브라우저 크기에 따라 크기를 조정하고 다음 버튼에서 스크롤 바에서 가장 먼 오른쪽 점.

스크롤 가능 항목의 각 항목은 배경 변경을 트리거합니다. 나는 현재 "현재"클래스를 토글하려고 노력 중이다. 그 위에 마우스를 가져 가면 흰색 테두리가 생깁니다. 나는 또한 .current 상태가되기를 원한다. 어떻게 내가 그걸 토글러 갈까요?

<div id="bkgrSelector"> 
<div class="scrollNav"> 
    <a class="prev"></a> 
</div> 
<div class="scrollable"> 
    <div class="items" id="thumbs"> 
     <?php 
      for($i=0; $i < count($imageArray); $i++){ 
       echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" />'); 
      } 
     ?> 

    </div> 
</div> 
<div class="scrollNav"> 
    <a class="next"></a> 
</div> 

자바 스크립트 :

이

//Initiates Background selector scrollable 
$("#bkgrSelector .scrollable").scrollable(); 

//Changes the background selector scrollable size, and handles the disabling of the next button at end of scrollable 
$(window).bind('resize', function(){ 
    var width = $(document).width(); 
    var thumbWidth = Math.round(width - 350); 
    $("#bkgrSelector").css("width", thumbWidth + "px"); 
    $("#bkgrSelector .scrollable").css("width", (thumbWidth - 48) + "px"); 

    var scrollable = jQuery("#bkgrSelector .scrollable").data("scrollable"); 
    var size = Math.floor(thumbWidth/94); 
    console.log(size); 
    scrollable.onSeek(function(event, index) { 
     if (this.getIndex() >= this.getSize() - size) { 
      jQuery(".scrollNav .next").addClass("disabled"); 
     } 
    }); 
    scrollable.onBeforeSeek(function(event, index) { 
    if (this.getIndex() >= this.getSize() - size) { 
     if (index > this.getIndex()) { 
     return false; 
     } 
    } 
    }); 
}).resize() 

CSS : 내가 제대로 원하는 행동을 이해하면 사용자가 이미지를 클릭 할 때

#bkgrSelector .items img:hover, #bkgrSelector .items .current 
{padding:0; border:2px solid #fff; cursor:pointer; } 

Answer 1

, 당신은 .current 싶습니다 스타일 스틱 스틱을 누른 다음 귀하의 배경을 변경 적용 거시기? 그렇다면 다음과 같이 작동합니다.

$('#thumbs img').click(function() { 

    // remove existing current selection 
    $('#thumbs img.current').removeClass('current'); 

    // Apply style to selected item 
    $(this).addClass('current'); 

});