简化Javascript和jQuery搜索脚本

问题描述

| 我有一个jQuery / JavaScript搜索脚本，其中包括一个选项卡式搜索框。目前，我的代码中有些行是完全不必要的。如何简化下面粘贴的所有代码。 我的HTML代码：

<div id=\'nav\'>
<ul>
<li><a href=\'javascript:void(null);\' class=\'type search\'>Web</a></li>
<li><a href=\'javascript:void(null);\' class=\'type images\'>Images</a></li>
<li><a href=\'javascript:void(null);\' class=\'type videos\'>Videos</a></li>
<li><a href=\'javascript:void(null);\' class=\'type news\'>News</a></li>
<li><a href=\'javascript:void(null);\' class=\'type social\'>Social</a></li>
</ul>
</div>

<form id=\'search\' method=\'post\'>
<input type=\'text\' id=\'query\'>
</form>
<div id=\"results\"></div>

我的jQuery / Javascript代码：

$(document).ready(function () {
    Tabs.types.init(\'search\');
    Tabs.search.init();
});

var Tabs = {
    search: {
        init: function () {
            jQuery(Tabs.element.form).bind(\'submit\',function (evt) {
                evt.preventDefault();
            });
        },submit: function () {
                var type = Tabs.types.selected;
        },},types: {
        init: function (selected) {
            Tabs.types.selected = selected;
            jQuery(\'.\' + Tabs.types.selected).addClass(\'selected\');
            jQuery(Tabs.element.types).bind(\'click\',function () {
                Tabs.types.click(jQuery(this));
            });
        },click: function (obj) {
            jQuery(Tabs.element.types).each(function () {
                if (jQuery(this).hasClass(\'selected\')) {
                    jQuery(this).removeClass(\'selected\');
                }
            });
            if (obj.hasClass(\'web\')) Tabs.types.selected = \'search\';
            if (obj.hasClass(\'images\')) Tabs.types.selected = \'images\';
            if (obj.hasClass(\'videos\')) Tabs.types.selected = \'videos\';
            if (obj.hasClass(\'news\')) Tabs.types.selected = \'news\';
            if (obj.hasClass(\'social\')) Tabs.types.selected = \'social\';
            obj.addClass(\'selected\');
        }
    },element: {
        types: \'.type\',form: \'#search\',};

$(document).ready(function(){
    $(\"#query\").keyup(function(e){
        if(e.keyCode==13){
            var query=$(this).val();
            var yt_url=\'\'+Tabs.types.selected+\'.PHP?q=\'+query;
            window.location.hash=\'\'+Tabs.types.selected+\'/\'+query+\'/\';
            $.ajax({
                type:\"GET\",url:yt_url,dataType:\"html\",success:function(results){
                   $(\'#results\').html(results);
                }
            });
        }
    });
});

    

解决方法

        例如， 您可以统一CSS类和类型，以便仅编写Typs.types.selected = obj.class