jQuery 스포트 라이트 문제

Question

내 웹 사이트에 jquery Spotlight 스 니펫 (By Dev7Studios)을 삽입하려고합니다. 다음과 같은 시나리오로 해결해야합니다 :

"Div A"와 "Div B"가 강조 표시됩니다. jQuery에 대한 충돌 모드가 없어야합니다. 내가 mouseovered 때 "사업부 A가", "사업부 B는"얻는 것을 그에게 방법을 만들 필요가

스크립트를 다음과 같이

jQuery.noConflict(); 
jQuery(window).load(function() { 

    jQuery('#A, #B').bind('mouseover', function(){ 
     jQuery(this).spotlight({exitEvent:'mouseover', speed:600}); 

    }); 

}); 

이 div의 각이 강조받을 때 마우스 오버 만 : 지금까지 내가 사용하는 스크립트입니다 강조 표시됩니다. 이것은 이상적인 해결책이 될 것입니다.

가능한 솔루션은 또한, "사업부 B", "사업부 A"에 마우스를 통해 내가 가지고있는 스크립트, 지금이 순간 사업부의 A.

과 함께 강조 표시됩니다 때, 오직 사업부가 강조지고 있다는 것을 할 수있다 , 그것 위에 mouseover가있는 것.

어떤 아이디어로주세요?

감사합니다.

Answer 1

아래와 같이 #a ... 위에 마우스를 올려 놓은 후 #b의 jQuery 선택기를 호출하면됩니다. OP 코멘트 당

jQuery('#A').bind('mouseover', function(){ 
    jQuery('#B').spotlight({exitEvent: 'mouseover', speed:600}); 
}); 

Answer 2

업데이트 : 당신은 당신에게 그런 요소가 다른 사람들이 당신에 의해 정의된다 .. 아마도 영향 Z, B의 영향 A를 등에 영향을있는지도 .. 그냥 만들 수

지도의 값을 통해 루프

데모 : http://jsfiddle.net/lucuma/4RFWQ/1/

var map = { 
"#A" : "#B", 
"#B" : "#A", 
"#Z" : "#A" 
}; 

jQuery.each(map, function(key, value) { 
    var val = value; 
    jQuery(key).on('mouseover', function() { 
     jQuery(val).spotlight({exitEvent:'mouseover',  speed:600}); 
    }); 

});​ 

또한 배열을 통해 루프는

을 결합 수 0

원본 :

나는 당신이 그것을 일반화하기 위해이 같은 일을해야한다고 생각 : 도움말

<div id="a" data-coord="b"></div><div id="b" data-coord="a"></div><div id="z" data-coord="b"></div> 

jQuery.noConflict(); 
jQuery(window).load(function() { 

jQuery('#A, #B').bind('mouseover', function(){ 
    jQuery('#' + jQuery(this).attr('data-coord')).spotlight({exitEvent:'mouseover', speed:600}); 

}); 

});