0

誰かが私を助けてくれることを願っていますが、この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>
4

7 に答える 7

0

はい、コードをよりきれいにするための非常に多くのオプションがあります。これが私がすることです。要素にいくつかのクラスを追加します。

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

于 2013-09-06T09:13:37.083 に答える
0

$の代わりに使用しますが、他のライブラリと競合するjQuery場合は、 a を使用してラップします。$(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>
于 2013-09-06T09:07:26.197 に答える