如何在javascript中组合这两个id

如何在javascript中组合这两个id,javascript,jquery,forms,slug,Javascript,Jquery,Forms,Slug,目前我正在开发一个应用程序供我妻子使用,因为她不懂电脑,我试图让她更容易解决问题,让我将来更容易发现任何错误 因此,我找到了一个基于jquery的a,它可以自动将id标记为的输入框转移到slug框。我相信这对我来说是最有用的,因为我妻子可以跳过slug选项,而不是输入无关的slug 下面是javascript: (function ($) { // DONT FORGET TO NAME YOUR PLUGIN jQuery.fn.makeSlug = function (opt

目前我正在开发一个应用程序供我妻子使用,因为她不懂电脑,我试图让她更容易解决问题,让我将来更容易发现任何错误

因此,我找到了一个基于jquery的a,它可以自动将id标记为的输入框转移到slug框。我相信这对我来说是最有用的,因为我妻子可以跳过slug选项,而不是输入无关的slug

下面是javascript:

(function ($) {
    // DONT FORGET TO NAME YOUR PLUGIN
    jQuery.fn.makeSlug = function (options, i) {
        if (this.length > 1) {
            var a = new Array();
            this.each(
                function (i) {
                    a.push($(this).makeSlug(options, i));
                });
            return a;
        }
        var opts = $.extend({}, $().makeSlug.defaults, options);

        /* PUBLIC FUNCTIONS */

        this.destroy = function (reInit) {
            var container = this;
            var reInit = (reInit != undefined) ? reInit : false;
            $(container).removeData('makeSlug'); // this removes the flag so we can re-initialize
        };

        this.update = function (options) {
            opts = null;
            opts = $.extend({}, $().makeSlug.defaults, options);
            this.destroy(true);
            return this.init();
        };

        this.init = function (iteration) {
            if ($(container).data('makeSlug') == true)
                return this; // this stops double initialization

            // call a function before you do anything
            if (opts.beforeCreateFunction != null && $.isFunction(opts.beforeCreateFunction))
                opts.beforeCreateFunction(targetSection, opts);

            var container = this; // reference to the object you're manipulating. To jquery it, use $(container). 

            $(container).keyup(function(){
                if(opts.slug !== null) opts.slug.val(makeSlug($(this).val()));
            });

            $(container).data('makeSlug', true);

            // call a function after you've initialized your plugin
            if (opts.afterCreateFunction != null && $.isFunction(opts.afterCreateFunction))
                opts.afterCreateFunction(targetSection, opts);
            return this;
        };

        /* PRIVATE FUNCTIONS */

        function makeSlug(str) { 
            str = str.replace(/^\s+|\s+$/g, ''); // trim
            str = str.toLowerCase();

            // remove accents, swap ñ for n, etc
            var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
            var to   = "aaaaeeeeiiiioooouuuunc------";
            for (var i=0, l=from.length ; i<l ; i++) {
                str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
            }

            str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes

            return str;
        };

        // Finally
        return this.init(i);
    };

    // DONT FORGET TO NAME YOUR DEFAULTS WITH THE SAME NAME
    jQuery.fn.makeSlug.defaults = {
        slug: null,
        beforeCreateFunction: null, // Remember: these are function _references_ not function calls
        afterCreateFunction: null
    };
})(jQuery);
(函数($){
//别忘了给你的插件命名
jQuery.fn.makeSlug=函数(选项,i){
如果(此长度>1){
var a=新数组();
这个,每个(
职能(一){
a、 push($(this.makeSlug(options,i));
});
返回a;
}
var opts=$.extend({},$().makeSlug.defaults,options);
/*公共职能*/
this.destroy=函数(reInit){
var容器=这个;
var reInit=(reInit!=未定义)?reInit:false;
$(container).removeData('makeSlug');//这将删除标志,以便我们可以重新初始化
};
this.update=函数(选项){
opts=null;
opts=$.extend({},$().makeSlug.defaults,options);
这个。销毁(真);
返回这个.init();
};
this.init=函数(迭代){
if($(container.data('makeSlug')==true)
返回此;//这将停止双重初始化
//在做任何事情之前先调用函数
if(opts.beforeCreateFunction!=null&$.isFunction(opts.beforeCreateFunction))
opts.beforeCreateFunction(targetSection,opts);
var container=this;//对正在操作的对象的引用。要jquery它,请使用$(container)。
$(容器).keyup(函数(){
if(opts.slug!==null)opts.slug.val(makeSlug($(this.val()));
});
$(容器).data('makeSlug',true);
//初始化插件后调用函数
if(opts.afterCreateFunction!=null&$.isFunction(opts.afterCreateFunction))
opts.afterCreateFunction(targetSection,opts);
归还这个;
};
/*私人职能*/
函数makeSlug(str){
str=str.replace(//^\s+|\s+$/g',);//修剪
str=str.toLowerCase();
//去除重音符号,用ñ替换n等
var from=“ááäèèèèèèèèèèèèèèèèè;
var to=“aaaaeeiiiouunc------”;
对于(var i=0,l=from.length;i

向下和变脏?这将替换
slug
插件

$('#fname,#lname').keyup(function() { // *FANCIER* using this would trigger slug creation on the fly as you type either first OR last name
$('#lname').blur(function() { // *SIMPLER* this triggers the slug to create when the last name has been typed
    var f = $('#fname').val(); // get the first name
    f = f.toLowerCase(); // convert it to lower case
    f = f.replace(/[^a-z0-9 -]/g, ''); // remove invalid characters
    f = f.replace(/\s+/g, '-'); // replace whitespace with dash
    f = f.replace(/-+/g, '-'); // replace space with dash
    var l = $('#lname').val();
    l = l.toLowerCase();
    l = l.replace(/[^a-z0-9 -]/g, '');
    l = l.replace(/\s+/g, '-');
    l = l.replace(/-+/g, '-');
    var s = f + '-' + l; // concatenate resulting first and last to slug
    $('#slug').val(s).attr('readonly','readonly');
});


你写了这个
slug
插件,但你却不知道如何添加
“#lname”
元素?可疑..@DevlshOne,很抱歉,这不是我的插件。我在帖子中提到我找到了这个slug插件,而不是我写的这个slugplugin@JeffChew你试过什么了吗?你能在插件中做些修改吗想要一个不改变插件的解决方案吗?Hi@Volune,坦率地说,我完全不了解javascript和jquery,因此我正在寻求帮助,以获得我想要的最终结果的解决方案,如果可能的话,不需要修改插件。但是我愿意知道答案是否添加了备注,这样我就可以知道如果我将来我也会遇到同样的问题。谢谢使用beforeCreateFunction来连接各种components@DevishOne谢谢你,伙计…你让这看起来比slug插件更简单…你是一个真正的大师。再次非常感谢你!!@JeffChew没问题。看起来你并不需要所有这些来完成你想要完成的事情。也许吧听两个输入字段中的更改要比听姓氏上的模糊更好。True…或者在两个框上使用
.keyup()
,但我尽量让它尽可能简单。
   <span class="label">First Name:</span> <input type="text" name="fname" maxlength="20" id="fname" placeholder="First Name" />
    <br /><br />
    <span class="label">Last Name :</span> <input type="text" name="lname" maxlength="20" id="lname" placeholder="Last Name" />
    <br /><br />
    <span class="label">Slug :</span> <input type="text" name="slug" maxlength="20" id="slug" placeholder="Slug" />   
    <br /><br />
$('#fname,#lname').keyup(function() { // *FANCIER* using this would trigger slug creation on the fly as you type either first OR last name
$('#lname').blur(function() { // *SIMPLER* this triggers the slug to create when the last name has been typed
    var f = $('#fname').val(); // get the first name
    f = f.toLowerCase(); // convert it to lower case
    f = f.replace(/[^a-z0-9 -]/g, ''); // remove invalid characters
    f = f.replace(/\s+/g, '-'); // replace whitespace with dash
    f = f.replace(/-+/g, '-'); // replace space with dash
    var l = $('#lname').val();
    l = l.toLowerCase();
    l = l.replace(/[^a-z0-9 -]/g, '');
    l = l.replace(/\s+/g, '-');
    l = l.replace(/-+/g, '-');
    var s = f + '-' + l; // concatenate resulting first and last to slug
    $('#slug').val(s).attr('readonly','readonly');
});