JQuery fade divs in и out

Question

Я пытаюсь получить набор divs, чтобы исчезать и выходить с помощью jQuery. У меня есть решение, хотя оно кажется очень неуклюжим. Есть ли способ упорядочить мой код? Я довольно новичок в jQuery, поэтому любая помощь очень ценится!

HTML:

<a class="button" href="javascript:void(0)" id="onelink">Show Div One</a> 
<a class="button" href="javascript:void(0)" id="twolink">Show Div Two</a> 
<a class="button" href="javascript:void(0)" id="threelink">Show Div Three</a> 
<a class="button" href="javascript:void(0)" id="fourlink">Show Div Four</a> 

<div class="content"> 

<div id="one" class="thing">One</div> 
<div id="two" class="thing">Two</div> 
<div id="three" class="thing">Three</div> 
<div id="four" class="thing">Four</div> 

</div> 

SCSS:

a.button { 
    text-decoration: none; 
    color: #000; 
    display: inline-block; 
    padding: 10px; 
    margin: 20px; 
    border: 1px solid #000; 
    @include transition (all 0.2s); 

    &:hover { 
    border: 1px solid #dadada; 
    background-color: #f5f5f5; 
    } 
} 

div.thing { 
    border: 1px solid #BADA55; 
    background-color: #dadada; 
    padding: 30px; 
    text-align: center; 
    width: 200px; 
    margin: 20px; 
    position: absolute; 
    display: none; 

    &#one { 
    display: block; 
    } 
} 

Jquery:

$(document).ready(function() { 
    $("#onelink").click(function() { 
    $("div#one").fadeIn(); 
    $("div#two, div#three, div#four").fadeOut(); 
    }); 

    $("#twolink").click(function() { 
    $("div#two").fadeIn(); 
    $("div#one, div#three, div#four").fadeOut(); 
    }); 

    $("#threelink").click(function() { 
    $("div#three").fadeIn(); 
    $("div#one, div#two, div#four").fadeOut(); 
    }); 

    $("#fourlink").click(function() { 
    $("div#four").fadeIn(); 
    $("div#one, div#two, div#three").fadeOut(); 
    }); 
}); 

Codepen ссылка здесь:

http://codepen.io/mikehdesign/pen/eNpxRQ

Answer 1

Вместо добавления отдельных обработчиков для каждой кнопки вы можете использовать обычный обработчик и использовать href, чтобы указать, какой thing будет отображаться.

<a class="button" href="#one">Show Div One</a> 
<a class="button" href="#two">Show Div Two</a> 
<a class="button" href="#three">Show Div Three</a> 
<a class="button" href="#four">Show Div Four</a> 

<div class="content"> 

    <div id="one" class="thing">One</div> 
    <div id="two" class="thing">Two</div> 
    <div id="three" class="thing">Three</div> 
    <div id="four" class="thing">Four</div> 

</div> 

затем

$(document).ready(function() { 
    var $things = $('.thing'); 
    $(".button").click(function (e) { 
     e.preventDefault(); 
     var $div = $($(this).attr('href')); 
     $div.stop().fadeIn(); 
     $things.not($div).stop().fadeOut(); 
    }); 

}); 

Демо: Fiddle

Answer 2

Использование data-attributes, поэтому предположим, #onelink открывает div#one - добавить data-id = "one" к нему анс так далее,

<a class="button" href="" data-id="one">Show Div One</a> 
<a class="button" href="" data-id="two">Show Div Two</a> 
<a class="button" href="" data-id="three">Show Div Three</a> 
<a class="button" href="" data-id="four">Show Div Four</a> 

EDIT:.

javascript:void(..) может быть удален, а событие по умолчанию <a> может быть обработано с помощью event.preventDefault().

Или, может быть, просто удалите href и обработайте cursor в CSS.

Также, как предлагает @Regent, идентификаторы id="onelink" .. больше не требуются, поскольку решение работает на классах.

---

$(document).ready(function() { 
    $(".button").click(function(event) { 
    event.preventDefault(); 
    var $divtoRender = $("#"+$(this).data('id')); 
    $divtoRender.fadeIn(); 
    $("div.thing:visible").not($divtoRender).fadeOut(); 
    }); 
}); 

Updated CodePen