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

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>
于 2013-09-06T09:05:02.660 回答
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 回答
0

如果您不使用 $ 作为任何其他符号，则可以使用 '$' 而不是 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();
        });
    });

我结合了一些常见类型操作的查询。

于 2013-09-06T09:03:47.587 回答
0

隐藏/显示调用可以写成： 

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

.click() 调用应该已经没问题了。

于 2013-09-06T09:03:49.237 回答
0

首先，您可以像这样编写显示和隐藏：

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

其次，您可以使用，$而不是jQuery如果您还没有使用noConflict()

于 2013-09-06T09:03:52.267 回答
0

使用 css 隐藏和显示，因为它已准备好在文档上，您不需要使用 jQuery 来隐藏它

.mobile-search, .mobile-top-links, .mobile-checkout {
    display: none;
}
.cart_show, .account_show, .search_show {
    display: block;
}
于 2013-09-06T09:02:10.893 回答
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 回答