jQuery Newbie, existe-t-il une méthode plus propre pour écrire ce code? - jquery, refactoring

En espérant que quelqu'un puisse m'aider, ce code jQueryFonctionne, mais je me demandais s'il y avait une meilleure façon de le structurer, on dirait qu'il pourrait être refactorisé pour être plus propre et plus facile à lire. Toute aide serait grandement appréciée.

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

Réponses:

0 pour la réponse № 1

Oui, vous disposez de nombreuses options pour rendre votre code plus propre. Voilà ce que je ferais. J'ajouterais quelques classes supplémentaires aux éléments:

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

Et voici le Javascript.

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

Et quelques CSS:

.hidden {
display: none;
}

Vous pouvez jeter un œil à ce jsFiddle pour une démo: http://jsfiddle.net/yrBxH/

---

1 pour la réponse № 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 pour la réponse № 3

Utilisez CSS pour masquer et afficher puisque son document est prêt, vous n'avez pas besoin d'utiliser jQuery pour le masquer

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

---

0 pour la réponse № 4

Vous pouvez utiliser "$" au lieu de jquery si vous n'utilisez pas $ comme tout autre symbole. Exemple:

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

J'ai combiné quelques requêtes pour des opérations de type commun.

---

0 pour la réponse № 5

Les appels masqués / affichés peuvent être écrits comme suit:

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

Les appels .click () devraient déjà être bien.

---

0 pour la réponse № 6

vous pouvez d'abord écrire le spectacle et vous cacher comme ceci:

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

deuxièmement, vous pouvez utiliser $ au lieu de jQuery si vous n'utilisez pas déjà noConflict()

---

0 pour la réponse № 7

Utilisation $ au lieu de jQuery, mais si $ conflit avec d'autres bibliothèques, utilisez un (function($){ ...})(jQuery) pour l'envelopper.

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

---