jQuery Новичок, есть ли более чистый способ написать этот код?

Question

Надеюсь, кто-то может мне помочь, этот код jQuery работает, но мне было интересно, есть ли лучший способ его структурирования, похоже, что он может быть реорганизован, чтобы быть чище и легче читать. Любая помощь будет принята с благодарностью.

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

Answer 1

Да, у вас есть много вариантов, чтобы сделать ваш код чище. Это то, что я сделал бы. Я хотел бы добавить некоторые дополнительные классы элементов:

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

И вот Javascript.

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

И некоторые CSS:

.hidden { 
    display: none; 
} 

Вы можете посмотреть на этой jsFiddle для демонстрации: http://jsfiddle.net/yrBxH/

Answer 2

Используйте CSS, чтобы скрыть и показать, так как его на документе готовы вам не нужно использовать JQuery, чтобы скрыть это

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

Answer 3

Вы можете использовать «$» вместо JQuery, если вы не используете $, как любой другой символ. пример:

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

Я объединил несколько запросов для операций общего типа.

Answer 4

Скрыть/шоу вызовов можно записать в виде:

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

В .click() вызовы должны быть в порядке уже.

Answer 5

первым вы можете написать шоу и скрыть, как это:

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

второй, вы можете использовать $ вместо jQuery если вы не используете noConflict()

Answer 6

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

Answer 7

Использование $ вместо jQuery, но если $ конфликт с другими библиотеками, используйте (function($){ ...})(jQuery), чтобы обернуть его.

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