jquery variable?

Question

나는, 내가지도에 특정 링크가 표시 될 때 다음과 같은 jQuery를이 사업부를 보여주기 위해 작성해야 JQuery와 초보자 해요 :

<div id="locationmap"> 
    <a class="linkhide" id="link1" href="#">Occupier 1</a> 
    <a class="linkhide" id="link2" href="#">Occupier 2</a> 
    <a class="linkhide" id="link3" href="#">Occupier 3</a> 
</div> 
<div id="mapdetail"> 
    <div class="hideme" id="local1" style="display:none;"> 
     <p>Some content one</p> 
    </div> 
    <div class="hideme" id="local2" style="display:none;"> 
     <p>Some content two</p> 
    </div> 
    <div class="hideme" id="local3" style="display:none;"> 
     <p>Some content three</p> 
    </div>  
</div> 

<script type='text/javascript'>//<![CDATA[ 
    $("#link1").mouseover(function() { $("#local1").fadeIn(500); }); 
    $("#link2").mouseover(function() { $("#local2").fadeIn(500); }); 
    $("#link3").mouseover(function() { $("#local3").fadeIn(500); }); 

    $(".linkhide").mouseout(function() { $(".hideme").css('display','none'); }); 
//]]> 
</script> 

그러나 당신이 .fadeIn을 볼 수, (500)되고있다 각 링크마다 반복됩니다. 이 변수를 한 번 변수로 만들고 각 행을 호출하는 방법은 무엇입니까? 이렇게하면 각 링크마다 동일한 코드 조각을 30 번 정도 반복해서 저장하지 않아도됩니다. http://jsfiddle.net/karlgoldstraw/4NRY7/

감사 :

내가 여기 JSfiddle 있습니다.

Answer 1

function mouseOver(localId) { 
    return function() { $("#local" + localId).fadeIn(500); } 
} 

$("#link1").mouseover(mouseOver(1)); 

Answer 2

당신이 링크 사업부 간단한 사이의 연결을 확인하기 위해 데이터 속성을 사용할 수 있습니다 ,,, 현재 스크립트

<a data-id="2"... 

$('a.linkhide').mouseover(function() { 
    var el = '#local' + $(this).data('id'); 
    $(el).fadeIn(500); 
}); 

Answer 3

교체.

이 코드를 사용하면 단일 동적 함수를 사용하고 모든 .linkhide 요소에 대해 jQuery.mouseover() 번의 단일 호출을 사용하여 @ MikeThomsen의 대답으로 인한 코드 중복을 피할 수 있습니다.

$(document).ready(function() { 

    $(".linkhide").mouseover(function (event) { 

    var item_id = this.id.match(/([0-9]+)$/)[1]; 

    $("#local" + item_id).fadeIn(500); 

    }); 


    $(".linkhide").mouseout(function() { 

     $(".hideme").css('display', 'none'); 

    }); 

}); 

Answer 4

이것은 HTML 변경과 관련이없는 한 가지 방법입니다. 링크의 ID를 변경하면 훨씬 효율적으로 만들 수 있습니다.

$(".linkhide").mouseover(function() { 
    var linkDivMap = { 'one' : 1, 'two' : 2, 'three' : 3, 'four' : 4 }; 
    var contentBox =$(this).attr('id').replace('link',''); 
    $("#content" + linkDivMap[contentBox]).fadeIn(500); 
}); 

$(".linkhide").mouseout(function() { $(".hideme").css('display','none'); }); 

Answer 5

나는 아직 내가 내 대답을 추가 할 것이라고 생각하지 않기 때문에. 위의 답변이 완벽하게 실현 가능하다는 것을 알았지 만 내 솔루션에서 링크가 표시 할 콘텐츠가 무엇인지 알려주고 있습니다. 링크의 해시 값을 검사하는 자바 스크립트 함수를 추가하여 fadein을 수행하는 셀렉터로 사용할 수 있습니다. 또한 해시 링크가 자바 스크립트가 비활성화 된 이벤트의 올바른 콘텐츠에 사용자를 배치하므로 더 나은 품질 저하의 이점을 제공합니다.

자바 스크립트

다음

var fade = function(){ 
    var contentSelector = this.hash; 
    $(contentSelector).fadeIn(500); 
}; 

는 마우스 오버 선언합니다 :

$("#linkone").mouseover(fade); 
$("#linktwo").mouseover(fade); 
$("#linkthree").mouseover(fade); 
$("#linkfour").mouseover(fade); 

을 또는 당신은 이런 식으로 그것을 할도 수 :

$(".linkhide").mouseover(fade); 

그런 다음 HTML에

<a class="linkhide" id="linkone" href="#content1">Link 1</a> 
<a class="linkhide" id="linktwo" href="#content2">Link 2</a> 
<a class="linkhide" id="linkthree" href="#content3">Link 3</a> 
<a class="linkhide" id="linkfour" href="#content4">Link 4</a> 

등 ...

JSFiddle - 모든 답을 http://jsfiddle.net/4NRY7/11/