码迷,mamicode.com
首页 > 其他好文 > 详细

Dom循环点击处理插件

时间:2015-03-05 19:34:50      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:jquery   js   

Web交互中,有种很常见的情况就是,当某个dom被第一次点击时,执行某种操作,第二次被点击时,执行另一种操作……第N次被点击时,执行第N种操作,当N+1时,有开始执行第一种操作,如此往复循环……

就这么一个dom的重复点击事件我也能无聊到做个插件出来,当真脑残,但既然做出来了,那就再次记录下,记录自己的脑残人生!

PS:此插件基于JQuery,以下是相关代码,其中参数methodName可以不传,此时表示对dom进行click事件绑定,如果传入非空字符串,则表示要执行相应的方法,暂时该插件只提供了一个执行第几个动作的方法

<span style="white-space:pre">	</span>$.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,//设定多少次点击动作为一组点击动作,即点击多少次为一轮
                    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代码如下

<span style="white-space:pre">	</span>$().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');
            });
        });

最后来张脑残截图

技术分享

Dom循环点击处理插件

标签:jquery   js   

原文地址:http://blog.csdn.net/starfd/article/details/44084971

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!