简化jQuery事件
Simplifying jQuery events
我编写这些函数是为了在单击表的特定单元格时处理数据。我有6个函数处理事件的数据,但每个都是相同的,它们只是具有不同的ID。下面是我的代码:
//COMMENT HANDLING
$("#mondayCommentLink").click(function () {
var mondayhtmls = $("#mondayComment");
var input = $("<input type='text' id='mondayCommentText' name='mondayCommentText' size='10' />");
input.val(data.days[0].comment);
mondayhtmls.html(input);
});
$("#tuesdayCommentLink").click(function () {
var tuesdayhtmls = $("#tuesdayComment");
var inputt = $("<input type='text' id='tuesdayCommentText' name='tuesdayCommentText' size='10' />");
inputt.val(data.days[1].comment);
tuesdayhtmls.html(inputt);
});
$("#wednesdayCommentLink").click(function () {
var htmls = $("#wednesdayComment");
var input = $("<input type='text' id='wednesdayCommentText' name='wednesdayCommentText' size='10' />");
input.val(data.days[2].comment);
htmls.html(input);
});
$("#thursdayCommentLink").click(function () {
var htmls = $("#thursdayComment");
var input = $("<input type='text' id='thursdayCommentText' name='thursdayCommentText' size='10' />");
input.val(data.days[3].comment);
htmls.html(input);
});
$("#fridayCommentLink").click(function () {
var htmls = $("#fridayComment");
var input = $("<input type='text' id='fridayCommentText' name='fridayCommentText' size='10' />");
input.val(data.days[4].comment);
htmls.html(input);
});
$("#saturdayCommentLink").click(function () {
var htmls = $("#saturdayComment");
var input = $("<input type='text' id='saturdayCommentText' name='saturdayCommentText' size='10' />");
input.val(data.days[5].comment);
htmls.html(input);
});
是否有一种方法,我可以简单地这个代码或使它比有6个单独的函数处理每个特定的细胞事件更优雅?
为每个评论链接添加data-dow="2"和data-day="wednesday"属性,去掉id="wednesday ",添加class="commentLink"。
<a class="wednesdayCommentLink">link</a>
是
<a class="commentLink" data-dow="2" data-day="wednesday">link</a>
对#wednesday - daycomment (.comment)和#wednesday - daycommenttext (. commenttext)执行相同的操作,为每个添加data-属性。
然后,使用以下JavaScript:
$(".commentLink").click(function () {
var dow = $(this).attr('data-dow');
var day = $(this).attr('data-day');
var input = $('<input type="text" class="commentText" data-dow="'+dow+'" data-day="'+day+'" name="'+day+'CommentText" size="10" />');
input.val(data.days[dow].comment);
$('.comment[data-dow="'+dow+'"]').html(input);
});
如果每个链接都有一个共同的类(或者您可以给它们一个),那么您可以使用它作为选择器。此外,在标签中添加类似data-day="1"
的内容,并使用与位置相对应的数字(星期一为0,星期二为1…)。
然后,用
var day = this.id.match(/('w+)CommentLink/)[1],
comment = data.dats[this.getAttribute("data-day")].comment;
然后你可以做$("#"+day+"Comment")
, id='"+day+"CommentText'
等等
我相信有很多事情可以做。但是当重构时,我建议从小处开始。首先,将事件处理程序的通用代码移到一个单独的函数中:
var handler = function(day,commentId,commentTextId) {
return function () {
var input = $("<input type='text' id='"+commentTextId+"' name='"+commentTextId+"' size='10' />");
input.val(day.comment);
$('#'+commentId).html(input);
};
};
你可以这样设置你的事件:
$("#mondayCommentLink").click(handler(data.days[0],"mondayComment","mondayCommentText"));
$("#tuesdayCommentLink").click(handler(data.days[1],"tuesdayComment","tuesdayCommentText"));
// and so on
var dayNums = {"monday": 0, "tuesday": 1, "wednesday": 2, "thursday": 3, "friday": 4, "saturday": 5};
$("#mondayCommentLink, #tuesdayCommentLink, #wednesdayCommentLink, #thursdayCommentLink, #fridayCommentLink, #saturdayCommentLink").click(function () {
var day = $(this).attr("id").replace(/CommentLink$/, "");
var htmls = $("#" + day + "Comment");
var input = $("<input type='text' id='" + day + "CommentText' name='" + day + "CommentText' size='10' />");
input.val(data.days[dayNums[day]].comment);
htmls.html(input);
});
我要做的是为commentLinks创建一个类,这样您就可以为每个元素只编写一次click事件,并且我不会删除id来做类似的事情:
jQuery('.commentLink').click(function(){
var elementId = jQuery(this).attr('id');
var sectionName = elementId.substring(0, elementId.lastIndexOf('Link'));
var htmls = jQuery('#' + sectionName);
var input = jQuery("<input type='text' id='" + sectionName + "Text' name='" + sectionName + "Text' size='10' />");
htmls.html(input);
});
相关文章:
- 选择onclick事件jquery
- 用于多个类事件Jquery的单个函数
- 激发滑块's幻灯片事件jquery ui
- 设置重复按钮以注册点击事件jquery
- 保留当前点击事件jquery
- 启动/停止按键事件jquery
- 在事件jquery中插入一个函数
- 删除克隆的事件JQuery
- typeahead选择事件(jQuery)的动态绑定
- 触发自定义事件 Jquery
- 绑定两次或更多次的事件 jquery
- 单击时的事件 jquery 不起作用
- 在鼠标悬停事件 jquery 上显示边框的内容
- 同时触发两个鼠标事件 jQuery
- 焦点事件 jquery 组合框/自动完成
- 如何在页面中捕获“正文”和“正文”事件[Jquery].
- 将对象传递给事件 jQuery
- 验证“取消”上的字段 单击Onbeforeunload事件JQUERY
- 复选框单击事件 jQuery 不起作用
- 口述事件jquery顺序