[英]How to combine both id in javascript
目前,我正在開發一個供妻子使用的應用程序,因為她不懂計算機,所以我試圖使事情變得更容易讓她解決,並讓我以后更容易發現任何錯誤。
因此,我發現了一個基於jquery的Slug生成器 ,該生成器可以將ID為標簽的輸入框自動轉移到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);
這是呼叫腳本代碼:
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#fname').makeSlug({
slug: $('#slug')
});
});
-->
</script>
這是我的表格:
<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 />
我打算做的是,“ 名字”和“姓氏”輸入都在子彈輸入框中組合並生成。
例如:
名:傑夫
姓氏:Jamie Hayden
子彈:傑夫·傑米·海登
但是當前的腳本只能在我的名字標簽上使用,我也想添加姓氏,請告訴我在哪里以及如何實現。
非常感謝所有花費大量時間閱讀和理解我的問題並為我提供幫助的SO專家。
下來又臟嗎? 這將替換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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.