Web交互中，有种很常见的情况就是，当某个dom被第一次点击时，执行某种操作，第二次被点击时，执行另一种操作……第N次被点击时，执行第N种操作，当N1时，有开始执行第一种操作，如此往复循环……就这么一个dom的重复点击事件我也能无聊到做个插件出来，当真脑残，但既然做出来了，那就再次记录下，记录自己的
$.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
<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>
$().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');
});
});
服务热线 19970861797
