원형 교차로 추가 addClass 발사 jQuery 회전식 컨베이어

Question

나는이 것을 설명하는 방법을 잘 모르지만 최선을 다할 것입니다.

이 튜토리얼 here을 따라 로터리 플랫폼을 사용하여 이미지 기반 jquery 회전식 캐 러셀을 제작했습니다.

튜토리얼을 살펴 보았으므로 컨베이어 자체는 작동하지만 컨트롤 span 태그 중 하나를 클릭하면 추가 작업을 추가하려고합니다. 자세한 내용을 표시하는 div의 removeClass/addClass를 수행하려면 다음을 수행하십시오. 현재 활성화 된 회전 목마 항목

jQuery 코드 :

(function($) { 

var $descriptions = $('#carousel-descriptions').children('li'), 
$controls = $('#carousel-controls').find('span'), 
$carousel = $('#carousel') 
    .roundabout({childSelector:"img", minOpacity:0 }) 
    .on('focus', 'img', function() { 
     var slideNum = $carousel.roundabout("getChildInFocus"); 

     $descriptions.add($controls).removeClass('current'); 
     $($descriptions.get(slideNum)).addClass('current'); 
     $($controls.get(slideNum)).addClass('current'); 
    }); 

$controls.on('click dblclick', function() { 
var slideNum = -1, 
    i = 0, len = $controls.length; 

for (; i<len; i++) { 
    if (this === $controls.get(i)) { 
     slideNum = i; 
     break; 
    } 
} 

if (slideNum >= 0) { 
    $controls.removeClass('current'); 
    $(this).addClass('current'); 
    $carousel.roundabout('animateToChild', slideNum); 
} 
}); 

}(jQuery)); 

HTML 코드 :

<div id="carousel"> 
<img src="images/weapons/handgun.png" alt="Handgun" class="slide" /> 
<img src="images/weapons/shotgun.png" alt="Shotgun" class="slide" /> 
<img src="images/weapons/assault-rifle.png" alt="Assault Rifle" class="slide" /> 
<img src="images/weapons/sniper-rifle.png" alt="Sniper Rifle" class="slide" /> 
</div> 
<div id="carousel-controls"> 
    <h3>Click on a weapon type:</h3> 
<span class="control current" id="handgun">Handgun</span> 
<span class="control" id="shotgun">Shotgun</span> 
<span class="control" id="assault-rifle">Assault Rifle</span> 
<span class="control" id="sniper-rifle">Sniper Rifle</span> 
</div> 
<div class="ballistic-detail current" id="handgun"> 
    <p>Ballistic details for handguns</p> 
</div> 
<div class="ballistic-detail" id="shotgun"> 
    <p>Ballistic details for shotguns</p> 
</div> 
<div class="ballistic-detail" id="assault-rifle"> 
    <p>Ballistic details for assault rifles</p> 
</div> 
<div class="ballistic-detail" id="sniper-rifle"> 
    <p>Ballistic details for sniper rifles</p> 
</div> 

의 ID로 스팬 컨트롤의 ID를 연결하는 I는 기존의 jQuery 코드에 추가 할 수있는 정말 간단 있나요 div가 보이기를 원합니까?

나는 이것을 JSFiddle : here에서 만들었지 만, 내 웹 사이트에서와 똑같이 작동하지 않는 것 같습니다. 나는 내가 필요한 모든 것을 부착했다고 생각한다. 어쨌든, 누구든지 그것에 추가하고 싶다면, 제발!

Answer 1

당신은 내가이처럼 HTML을 구성하는 것과 동일한 ID를 가진 여러 요소를 가질 수 없습니다 click 이벤트가 발생할 때마다 jQuery 객체를 사용할 것입니다.

click 이벤트 함수의 첫 번째 코드 줄은 span이 이미 활성화되어 있으면 아무 일도 일어나지 않도록합니다.

클래스는 span과 이에 해당하는 div에 추가됩니다. 그러면 current 클래스가 모든 span에 추가되고 .not() 함수를 사용하여 이 아닌 인 모든 요소를 ​​필터링하고 클릭하여 current 클래스를 제거합니다.

는

두 번째 부분은 다음을 클릭 span의 ID 플러스 -info와 클래스가 세부 사항 상자를 반환 .filter()을 사용하는 모든 세부 상자에서 current 클래스를 제거합니다.

내가 사용하는 CSS했다 :

여기

.ballistic-detail{ 
    display: none; 
} 
.ballistic-detail.current{ 
    display: block; 
} 
span.control.current{ 
    font-weight: bold; 
} 
span.control{ 
    cursor: pointer; 
} 

가 노력하고 있습니다 : http://jsfiddle.net/EFH7K/

Answer 2

당신은 아마 당신의 클릭 이벤트 핸들러에 이런 식으로 뭔가를 추가 할 것입니다 :

$controls.on('click dblclick', function() { 

    .... 

    $('.ballistic-detail').hide(400, function(){ 
     $("#" + $(this).attr('id')).show(); 
    }); 
}); 

작동합니다 그. 작동 테스트 없이는 알기가 약간 어렵습니다.

var ballisticDetail = $('.ballistic-detail'), 
    control = $('#carousel-controls .control'); 

control.on('click', function(){ 

    if($(this).is('.current')) return; 

    control.addClass('current').not(this).removeClass('current'); 
    ballisticDetail.removeClass('current') 
        .filter('.'+ this.id +'-info') 
        .addClass('current'); 

}); 

처음 두 줄은 캐시됩니다

<div id="carousel-controls"> 
    <h3>Click on a weapon type:</h3> 
    <span class="control current" id="handgun">Handgun</span> 
    <span class="control" id="shotgun">Shotgun</span> 
    <span class="control" id="assault-rifle">Assault Rifle</span> 
    <span class="control" id="sniper-rifle">Sniper Rifle</span> 
</div> 
<div class="ballistic-detail handgun-info"> 
    <p>Ballistic details for handguns</p> 
</div> 
<div class="ballistic-detail shotgun-info"> 
    <p>Ballistic details for shotguns</p> 
</div> 
<div class="ballistic-detail assault-rifle-info"> 
    <p>Ballistic details for assault rifles</p> 
</div> 
<div class="ballistic-detail sniper-rifle-info"> 
    <p>Ballistic details for sniper rifles</p> 
</div> 

다음이 자바 스크립트를 사용