Dom循環點擊處理插件
來源：程序員人生 發布時間：2015-03-10 08:22:47 閱讀次數：3109次
Web交互中，有種很常見的情況就是，當某個dom被第1次點擊時，履行某種操作，第2次被點擊時，履行另外一種操作……第N次被點擊時，履行第N種操作，當N+1時，有開始履行第1種操作，如此往復循環……
就這么1個dom的重復點擊事件我也能無聊到做個插件出來，認真腦殘，但既然做出來了，那就再次記錄下，記錄自己的腦殘人生！
PS：此插件基于JQuery，以下是相干代碼，其中參數methodName可以不傳，此時表示對dom進行click事件綁定，如果傳入非空字符串，則表示要履行相應的方法，暫時該插件只提供了1個履行第幾個動作的方法
$.fn.domClickRange = function (arg, methodName) {
/// <summary>用于處理循環的點擊動作</summary>
/// <param name="arg">要求參數.clickEvent傳遞的參數clickDom對應當前被點擊的dom對象;clickNumber對應當前的點擊動作為設定的GroupRange中的第幾個點擊動作，從0開始計算</param>
/// <param name="methodName">要履行的方法</param>
if (typeof methodName === "string" && $.trim(methodName) != "") {
switch (methodName) {
case "clickImmediately"://立刻履行第幾個點擊動作,可用于批量履行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,//要綁定點擊動作的selector,如果傳入null或空字符串表示要綁定點擊事件的為當前dom
clickDefaultNumer: 0,//默許為第幾次點擊動作
clickGroupRange: 2,//設定多少次點擊動作為1組點擊動作，即點擊多少次為1輪
clickEvent: function (clickDom, clickNumber) { } //dom被點擊時要觸發的函數
};
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");//之前的點擊標志
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;
}
};
以下是測試用的demo
html部份以下，bt_Button為要綁定點擊事件的按鈕，sp_Number用于顯示當前是第幾次點擊，bt_Immediately用于履行clickImmediately方法，ipt_Number用于傳入要離可以履行的點擊順序編號
<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>
用于測試的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');
});
});
最后來張腦殘截圖
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
