Jquery 스크립트가 buttons div와 충돌합니다.

Question

JQuery를 배우고 이미지를 통해 순환 텍스트를 만들려고하는데 버튼 div (containermain)에 문제가 있습니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/zAZst/7/ 마지막 세 개의 이미지는 버튼이며 위에있는 사진 (처음 세 개)에는 영향을주지 않아야합니다. 이미지 (처음 세 개) 위로 마우스를 가져 가면 완벽하게 작동하지만 버튼 (세 개의 이미지 마지막) 위에 마우스를 가져 가면 스크립트가 손상되어 작동을 멈 춥니 다. 스크립트를 수정하여 버튼 위에 마우스를 가져 가면 (마지막 세 이미지) 사이클링 텍스트에 영향을 미치지 않도록하시기 바랍니다. 감사.

Answer 1

난 당신이 라인을 참조하십시오

$('img').on('mouseover', function() { 
    clearInterval(intervalId); 
    displayTitle($(this).parents('div').attr('id').substring(5)); 
}).on('mouseout', function() { 
    currentImg = $(this).parents('div').attr('id').substring(5); 
    startLoop(); 
}) 

이는 자전거를 중지하려면 문서에서 "어떤"IMG에 마우스를 두었을 수 있습니다. 당신은

class="img_cycle" 

같은주기의 이미지에 클래스를 추가하고이 같은 선택을 삽입() 함수에 자바 스크립트의 첫 번째 줄, 변경할 수 있습니다 :

$('img.img_cycle').on('mouseover', function() { 
    clearInterval(intervalId); 
    displayTitle($(this).parents('div').attr('id').substring(5)); 
}).on('mouseout', function() { 
    currentImg = $(this).parents('div').attr('id').substring(5); 
    startLoop(); 
}) 

희망이 도움을 :)

편집 : 나는 funciton에서 일부 오타를 만들었습니다. 다음은 JSFIddle 작업 버전입니다. http://jsfiddle.net/zAZst/8/ :)

Answer 2

mouseover 및 mouseout 이벤트의 선택기가 단추 이미지뿐만 아니라 맨 위에있는 이미지에도 적용된다는 점이 문제입니다. 상단의 이미지 위로 마우스를 가져 가면 직계 부모의 div를 찾고 존재하는 id 속성을 가져오고 "substring"을 호출 할 수 있습니다. 그러나 단추 이미지에는 바로 위 div에 id가 없습니다. 실제 오류는 존재하지 않는 div id에서 하위 문자열을 호출 할 수 없기 때문에 Uncaught TypeError: Cannot call method 'substring' of undefined입니다.