Dom循環(huán)點(diǎn)擊處理插件
來源：程序員人生 發(fā)布時(shí)間：2015-03-10 08:22:47 閱讀次數(shù)：3101次
Web交互中，有種很常見的情況就是，當(dāng)某個(gè)dom被第1次點(diǎn)擊時(shí)，履行某種操作，第2次被點(diǎn)擊時(shí)，履行另外一種操作……第N次被點(diǎn)擊時(shí)，履行第N種操作，當(dāng)N+1時(shí)，有開始履行第1種操作，如此往復(fù)循環(huán)……
就這么1個(gè)dom的重復(fù)點(diǎn)擊事件我也能無聊到做個(gè)插件出來，認(rèn)真腦殘，但既然做出來了，那就再次記錄下，記錄自己的腦殘人生！
PS：此插件基于JQuery，以下是相干代碼，其中參數(shù)methodName可以不傳，此時(shí)表示對(duì)dom進(jìn)行click事件綁定，如果傳入非空字符串，則表示要履行相應(yīng)的方法，暫時(shí)該插件只提供了1個(gè)履行第幾個(gè)動(dòng)作的方法
$.fn.domClickRange = function (arg, methodName) {
/// <summary>用于處理循環(huán)的點(diǎn)擊動(dòng)作</summary>
/// <param name="arg">要求參數(shù).clickEvent傳遞的參數(shù)clickDom對(duì)應(yīng)當(dāng)前被點(diǎn)擊的dom對(duì)象;clickNumber對(duì)應(yīng)當(dāng)前的點(diǎn)擊動(dòng)作為設(shè)定的GroupRange中的第幾個(gè)點(diǎn)擊動(dòng)作，從0開始計(jì)算</param>
/// <param name="methodName">要履行的方法</param>
if (typeof methodName === "string" && $.trim(methodName) != "") {
switch (methodName) {
case "clickImmediately"://立刻履行第幾個(gè)點(diǎn)擊動(dòng)作,可用于批量履行dom操作
var clickNumber = ~~arg;
$(this).each(function () {
var arg = $(this).data('domClickRangeArg');
if (arg != null && typeof arg.clickEvent === "function") {
var clickItem = getClickItem(this, arg);
clickItem.data("clickNumber", clickNumber - 1 >= 0 ? clickNumber - 1 : arg.clickGroupRange - 1);
clickItem.click();
}
});
break;
}
}
else {//履行初始化
var setting = {
clickSelector: null,//要綁定點(diǎn)擊動(dòng)作的selector,如果傳入null或空字符串表示要綁定點(diǎn)擊事件的為當(dāng)前dom
clickDefaultNumer: 0,//默許為第幾次點(diǎn)擊動(dòng)作
clickGroupRange: 2,//設(shè)定多少次點(diǎn)擊動(dòng)作為1組點(diǎn)擊動(dòng)作，即點(diǎn)擊多少次為1輪
clickEvent: function (clickDom, clickNumber) { } //dom被點(diǎn)擊時(shí)要觸發(fā)的函數(shù)
};
arg = $.extend({}, setting, arg);
arg.clickDefaultNumer = ~~arg.clickDefaultNumer;//取整
arg.clickGroupRange = ~~arg.clickGroupRange;//取整
$(this).data('domClickRangeArg', arg);
$(this).each(function () {
var clickItem = getClickItem(this, arg);
clickItem.data("clickNumber", arg.clickDefaultNumer);
clickItem.click(function () {
var prevClickNumber = ~~$(this).data("clickNumber");//之前的點(diǎn)擊標(biāo)志
var nowClickNumber = ~~((prevClickNumber + 1) % arg.clickGroupRange);
$(this).data("clickNumber", nowClickNumber);
if (typeof arg.clickEvent === "function") {
arg.clickEvent(this, nowClickNumber);
}
return false;
});
});
}
function getClickItem(dom, arg) {
var clickItem = $(dom);
if (typeof arg.clickSelector === "string" && $.trim(arg.clickSelector) != "") {
clickItem = $(dom).find(arg.clickSelector);
}
return clickItem;
}
};
以下是測(cè)試用的demo
html部份以下，bt_Button為要綁定點(diǎn)擊事件的按鈕，sp_Number用于顯示當(dāng)前是第幾次點(diǎn)擊，bt_Immediately用于履行clickImmediately方法，ipt_Number用于傳入要離可以履行的點(diǎn)擊順序編號(hào)
<div>
<input type="button" id="bt_Button" value="Click" /> nowClickNumber:<span id="sp_Number"></span>
</div>
<div><input type="button" id="bt_Immediately" value="ClickImmediately" /><input type="text" id="ipt_Number" value="12" /></div>
用于測(cè)試的js代碼以下
$().ready(function () {
$('#bt_Button').domClickRange({
clickDefaultNumer: 9,
clickGroupRange: 15,
clickEvent: function (clickDom, clickNumber) {
console.info($(clickDom).attr('id') + clickNumber);
$('#sp_Number').html(clickNumber);
}
});
$('#bt_Immediately').click(function () {
$('#bt_Button').domClickRange($('#ipt_Number').val(), 'clickImmediately');
});
});
最后來張腦殘截圖
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
