jQuery Simplify

Question

4 개의 목록 항목을 사용하여 페이지의 다른 위치에 4 ​​개의 다른 div를 표시하거나 숨기는 웹 사이트에 대한 코드를 작성 중입니다. 여기

내가 뭐하는 거지의 거친 예입니다

<ul> 
    <li id="first">One</li> 
    <li id="second">Two</li> 
    <li id="third">Three</li> 
    <li id="fourth">Four</li> 
</ul> 

<div id="one">This is the first div</div> 
<div id="two">This is the second div</div> 
<div id="three">This is the third div</div> 
<div id="four">This is the four div</div> 

그리고 나는 계속 못생긴 엉덩이 JS 코드를 가지고, 내가 기억할 수없는 내 인생/방법을 알아낼 전혀 단순하게 만들 수 있습니다.

$("#first").click(function() { 
    $("#one").fadeIn(); 
    $("#two, #three, #four").fadeOut(); 
}); 
$("#second").click(function() { 
    $("#two").fadeIn(); 
    $("#one, #three, #four").fadeOut(); 
}); 
$("#third").click(function() { 
    $("#three").fadeIn(); 
    $("#two, #one, #four").fadeOut(); 
}); 
$("#fourth").click(function() { 
    $("#four").fadeIn(); 
    $("#two, #three, #one").fadeOut(); 
});​ 

이것은 내가 필요한 것을 수행하지만, 더 간단한 방법이 있어야한다는 것을 알고 있습니다. 여기에 JSFiddle 작동합니다 - http://jsfiddle.net/claycauley/FBrx5/

만약 내가 배울려고 노력하고 있기 때문에 어느 누구도 내가 그것을 왜 단순화하는 이유/방법을 이해하는 데 도움이 될 수 있습니다.

Answer 1

보십시오 : 같은 것에 대해 어떻게

$("li").click(function() { 
    $("div:visible").fadeOut(); 
    $("div").eq($(this).index()).fadeIn(); 
});​ 

http://jsfiddle.net/FBrx5/1/

Answer 2

: @Petah의 도움으로

<ul id="linky"> 
    <li id="first">One</li> 
    <li id="second">Two</li> 
    <li id="third">Three</li> 
    <li id="fourth">Four</li> 
</ul> 

<div class="first">This is the first div</div> 
<div class="second">This is the second div</div> 
<div class="third">This is the third div</div> 
<div class="fourth">This is the four div</div> 

$("#linky").on("click", "li", function(e) { 
    $("div:visible").fadeOut(); 
    $("." + e.target.id).fadeIn(); 
}); 

http://jsfiddle.net/FBrx5/4/

Answer 3

나는이 함께했다 :

$("li").click(function() { 
    if ($("div").eq($(this).index()).is(":visible")) { 
     return false; 
    } 
    else { 
     $("div:visible").fadeOut(); 
     $("div").eq($(this).index()).fadeIn(); 
    } 
     return false; 
});​ 

그의 솔루션에 대한 유일한 문제점은 이미 눈에 보이는 경우에도 여전히 div에서 활성화된다는 것입니다. 그것은 그것을 퇴색시킬 것이고, 다시 들어올 것입니다. 이것으로 나는 그 일이 멈추는 것을 막을 수 있습니다.