Question

我有一个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);
                }
            });
        }
    });
});

Answer 1

例如，

你可以统一css类和类型，这样你就可以编写Typs.types.selected = obj.class

简化Javascript和jQuery搜索脚本

1 个答案: