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);
});
Simplifying jQuery events
-
31-05-2022 - |
题
I wrote these functions to handle data when a particular cell of my table is clicked. I have 6 functions that handle the data for the event but each are the same, they just with a different ID. Here is my code:
//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);
});
Is there a way I can simply this code or make it more elegant than having 6 separate functions handling each specific cell event?
解决方案 4
其他提示
Add the attribute data-dow="2" and data-day="wednesday" to each comment link, remove the id="wednesdayCommentLink" and add class="commentLink".
<a class="wednesdayCommentLink">link</a>
becomes
<a class="commentLink" data-dow="2" data-day="wednesday">link</a>
Do the same for #wednesdayComment (.comment) and #wednesdayCommentText (.commentText), adding the data- attributes for each.
Then, use this 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);
});
If each of the links have a common class (or you can give them one), then you can use it as the selector. Additionally, add something like data-day="1"
to the tag, with the number corresponding to the position (0 for monday, 1 for tuesday...).
Then, start your function with:
var day = this.id.match(/(\w+)CommentLink/)[1],
comment = data.dats[this.getAttribute("data-day")].comment;
Then you can do things like $("#"+day+"Comment")
, id='"+day+"CommentText'
and so on.
I'm sure there's lot that can be done. But when refactoring I recommend starting out small. So first just move the common code of the event handler into a seperate function:
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);
};
};
Then you can setup your events like so:
$("#mondayCommentLink").click(handler(data.days[0],"mondayComment","mondayCommentText"));
$("#tuesdayCommentLink").click(handler(data.days[1],"tuesdayComment","tuesdayCommentText"));
// and so on
What I would do is to create a class for the commentLinks so you are able to write only once the click event for each element, and I wouldn't remove the id to do something like:
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);
});
And that's all.