Acortar mi jQuery

Question

¿Cómo podría hacer este jQuery más corto? ¡¿Supongo que debe haber una forma mejor de trabajar que esta ?!

(desnudo en cuenta que soy nuevo en 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> 

Cualquier ayuda o direcciones serían greatt como estoy hasta el último paso en este sitio y quiero que terminó :)

Answer 1

usted podría utilizar algún atributo adicional de los datos y una clase extra en sus enlaces para que sea un poco más corto.

Así que digamos que su html se ve así:

<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> 

entonces su jQuery puede reescribirse así:

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

Answer 2

para que parezca que estamos tratando de recrear el comportamiento estándar de "acordeón". Dependiendo del diseño de su página, puede ser útil encapsular sus elementos si es posible. Aquí hay una posible solución para hacer cosas que se abren y cierran. 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> 

Primero condensa el código en una etiqueta de secuencia de comandos y una declaración preparada documento, ya que el tener que en 3 piezas sólo se añadía la hinchazón.

Luego me aseguré de elegir $ como el parámetro para la devolución de llamada lista para el documento. jQuery amablemente le pasará un argumento jQuery para que dentro de nuestro bloque de código podamos usar de manera segura $, incluso si fuera de nuestro bloque de código se reserva para otros fines.

Aquí el .tab s controla su .content atravesando hasta el .panel más cercano y retrocediendo. De esta manera, el mismo comportamiento puede controlar todos 3.

Sin embargo, si sus "pestañas" no se pueden encapsular de esta manera, siempre puede asociarlas al contenido que se mostrarán u ocultarán de otra manera. Solo necesitaremos ver tu 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> 

para el inicio. Si usted tiene muchos más elementos, es posible que desee a través de un bucle de buttonid <> toggleid mapa:

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(); 
    }); 
}