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

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

使用$代替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>

Answer 7

是的，您有很多选项可以让您的代码更清晰。这就是我要做的。我会在元素中添加一些额外的类：

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

jQuery新手，有没有更简洁的方法来编写这段代码？

7 个答案: