结合两个Javascript和jQuery脚本 [英] Combining two Javascript and jQuery scripts

问题描述

我有两个单独的Javascript / jQuery脚本，我想合并。一种是标签式搜索框脚本，用于确定表单提交时的目的地。另一个是简单的Javascript搜索脚本。

我希望将这两个脚本合并，以便标签式脚本确定从搜索脚本中提取内容的位置。我希望人们能够理解我想描述的内容。

我的Javascript搜索脚本是：

  $（document）.ready（function（）{
 $（＃query）。keyup（function（e）{
 if（e.keyCode == 13） {
 var query = $（this）.val（）; 
 var yt_url ='search.php？q ='+ query; 
 window.location.hash ='search /'+查询+'/'; 
 $ .ajax（{
类型：GET，
 url：yt_url，
 dataType：html，
 success：function结果）{
 $（'＃results'）。html（results）; 
} 
}）; 
} 
}）; 
}） ; 
  

我的标签式搜索脚本是：

<$ p $（$）$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b}）;
$ b $ var Tabs = {
search：{
init：function（）{
jQuery（Tabs.element.form）.bind（'submit'，function（ evt）{
evt.preventDefault（）;
Tabs.search.submit（）;
}）;
}，
提交：function（）{
var type = Tabs.types.selected;
var url = type;
window.location.href = url;
}，
}，
类型：{
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（'选择'））{
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'）;
}
}，
元素：{
类型：'.type'，
形式：'#search'，
}，
};

解决方案

您可以从 Tabs.types.selected 并在您的查询中了解它。例如

  $（document）.ready（function（）{
 $（＃query）。keyup （函数（e）{
 if（e.keyCode == 13）{
 var query = $（this）.val（）; 
 var yt_url ='search.php？tab = '+ Tabs.types.selected +'& q ='+ encodeURIComponent（query）; 
 window.location.hash ='search /'+ query +'/'; 
 $ .ajax（{
类型：GET，
 url：yt_url，
 dataType：html，
成功：函数（结果）{
 $（'＃results'）。 html（results）; 
} 
}）; 
} 
}）; 
}）; 
  

我建议用 encodeURIComponent ，否则如果你的用户输入&和？和其他符号，然后永远不会到达您的页面作为参数。

同时放置 var Tabs = {search：{..etc 在此代码之前，因此您确定找到了选项卡。

I have two seperate Javascript/jQuery scripts which I would like to combine. One is a tabbed search box script which determines the destination of the form when it is submitted. The other is a simple Javascript search script.

I want to combine the two scripts so that the tabbed script determines the place to pull content from in the search script. I hope people can understand what I am trying to describe.

My Javascript search script is:

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

My tabbed search script is:

$(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();
                Tabs.search.submit();
            });
        },
        submit: function () {
                var type = Tabs.types.selected;
                var url = type;
                window.location.href = url;
        },
    },
    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',
    },
};

解决方案

You can get the selected tab from Tabs.types.selected and know it on your query. For example

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

I suggest to encode your query with encodeURIComponent, or else if your user type & and ? and other symbols, then never reach your page as parametres.

Also place the var Tabs = { search: { ..etc before this code so you are sure that the Tabs are found.

这篇关于结合两个Javascript和jQuery脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！