Skracanie mojego jQuery

Question

Jak uczynić ten jQuery krótszym? Zakładam, że musi być lepszy sposób pracy niż to !?

(miej na uwadze, Jestem nowy jQuery) ...

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

Każda pomoc lub wskazówki byłyby greatt jak ja, aż do ostatniego kroku na tej stronie, i chcesz go skończył :)

Answer 1

można użyć kilka dodatkowych atrybutów danych oraz dodatkową klasę na linki, aby go trochę krótszy.

Więc załóżmy, że html wygląda następująco:

<div id="white">white</div> 
<div id="v2black">v2black</div> 
<div id="v3black">v3black</div> 

<div id="firstpagename" class="toggle" data-for="white">toggle white</div> 
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div> 
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div> 

wówczas jQuery można przepisać tak:

jQuery(function() { 
    $('.toggle').on('click', function() { 
    var id = $(this).attr('data-for'); 
    $('#' + id).toggle(); 
    }); 
}); 

Answer 2

Wygląda na to, że próbujemy odtwarzać standardowe zachowanie "akordeonowe". W zależności od układu strony pomocne może być enkapsulowanie przedmiotów, jeśli to możliwe. Oto jedno z możliwych rozwiązań, które sprawiają, że rzeczy się otwierają i zamykają. jsFiddle

<div id="white" class="panel"> 
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v2black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v3black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div>​ 
<script> 
jQuery(".tab").on("click", function() { 
    $(this).closest('.panel').find('.content').toggle(); 
});​ 
</script> 

Najpierw skondensowany kod do jednego tagu script i jeden dokument gotowy stwierdzeniem, gdyż mając go w 3 kawałkach było dodanie tylko uwędzić.

Następnie upewniłem się, że wybrano $ jako parametr wywołania zwrotnego gotowego dokumentu. jQuery uprzejmie przekaże mu jeden argument jQuery, więc wewnątrz naszego bloku kodu możemy bezpiecznie używać $, nawet jeśli poza naszym blokiem kodu był on zarezerwowany dla innych celów.

Tutaj .tab s kontrolują swoje .content przechodząc do najbliższego .panel i cofają się. W ten sposób to samo zachowanie może kontrolować wszystkie 3. Jeśli jednak twoje "zakładki" nie mogą być tak hermetyzowane, zawsze można je skojarzyć z treścią, którą mają pokazać/ukryć w inny sposób. Musimy po prostu zobaczyć Twój html.

Answer 3

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 

    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 

    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

na początek. Jeśli masz wiele więcej elementów, może chcesz pętli przez buttonid <> toggleid mapę:

var map = { 
    "white": "firstpagename", 
    "v2black": "secondpagename", 
    ... 
}; 
for (var toggler in map) 
    makeToggle(toggler, map[toggler]); 
function makeToggle(togglerid, pageid) { 
    var page = $(document.getElementById(pageid)).hide(); 
    $(document.getElementById(togglerid)).click(function() { 
     page.toggle(); 
    }); 
}