jQuery Newbie, existe uma maneira mais limpa de escrever esse código? - jquery, refatoração

Esperando que alguém possa me ajudar, este código jQueryFunciona, mas eu queria saber se existe uma maneira melhor de estruturá-lo, parece que ele poderia ser refatorado para ser mais limpo e mais fácil de ler. Qualquer ajuda seria muito apreciada.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".mobile-search").hide();
jQuery(".search_show").show();
jQuery(".mobile-top-links").hide();
jQuery(".account_show").show();
jQuery(".mobile-checkout").hide();
jQuery(".cart_show").show();

jQuery(".search_show").click(function(){
jQuery(".mobile-search").slideToggle();
});
jQuery(".account_show").click(function(){
jQuery(".mobile-top-links").slideToggle();
});
jQuery(".cart_show").click(function(){
jQuery(".mobile-checkout").slideToggle();
});
});
</script>

Respostas:

0 para resposta № 1

Sim, você tem muitas opções para tornar seu código mais limpo. Isso é o que eu faria. Eu adicionaria algumas classes adicionais aos elementos:

<div class="mobile-search hidden">Search!</div>
<div class="search_show clickable" rel="mobile-search">Toggle Search</div>

E aqui está o Javascript.

jQuery("document").ready(function()
{
jQuery(".clickable").click(function()
{
var selector_class = jQuery(this).attr("rel");
jQuery("." + selector_class).slideToggle();
});
});

E algum CSS:

.hidden {
display: none;
}

Você pode dar uma olhada neste jsFiddle para uma demonstração: http://jsfiddle.net/yrBxH/

---

1 para resposta № 2

<style>
.mobile-search, .mobile-top-links, .mobile-checkout: { display: none; }
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".search_show").click(function(){
jQuery(".mobile-search").slideToggle();
});
jQuery(".account_show").click(function(){
jQuery(".mobile-top-links").slideToggle();
});
jQuery(".cart_show").click(function(){
jQuery(".mobile-checkout").slideToggle();
});
});
</script>

---

0 para resposta № 3

Use css para esconder e mostrar desde o seu documento pronto, você não precisa usar o jQuery para escondê-lo

.mobile-search, .mobile-top-links, .mobile-checkout {
display: none;
}
.cart_show, .account_show, .search_show {
display: block;
}

---

0 para a resposta № 4

Você pode usar "$" em vez de jquery se você não estiver usando $ como qualquer outro símbolo. exemplo:

 $(document).ready(function(){
$(".mobile-search,.mobile-top-links,.mobile-checkout").hide();
$(".search_show,.account_show,.cart_show").show();

$(".search_show").click(function(){
$(".mobile-search").slideToggle();
});
$(".account_show").click(function(){
$(".mobile-top-links").slideToggle();
});
$(".cart_show").click(function(){
$(".mobile-checkout").slideToggle();
});
});

Combinei poucas consultas para operações de tipo comum.

---

0 para a resposta № 5

As chamadas hide / show podem ser escritas como:

jQuery(".mobile-search, .mobile-top-links, .mobile-checkout").hide();
jQuery(".search_show, .account_show, .cart_show").show();

As chamadas .click () devem estar bem já.

---

0 para a resposta № 6

Primeiro você pode escrever o show e se esconder assim:

$(".mobile-search, .mobile-top-links, .mobile-checkout").hide();
$(".search_show, .account_show, .cart_show").show();

segundo, você pode usar $ ao invés de jQuery se você não estiver usando noConflict()

---

0 para resposta № 7

Usar $ ao invés de jQuery, mas se $ entrar em conflito com outras bibliotecas, use um (function($){ ...})(jQuery) para embrulhá-lo.

<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".mobile-search, .mobile-top-links, .mobile-checkout").hide();
$(".search_show, .account_show, .cart_show").show();

$(".search_show").click(function(){
$(".mobile-search").slideToggle();
});
$(".account_show").click(function(){
$(".mobile-top-links").slideToggle();
});
$(".cart_show").click(function(){
$(".mobile-checkout").slideToggle();
});
});
})(jQuery);
</script>

---