Упрощение событий jQuery

Question

Я написал эти функции для обработки данных при нажатии на конкретную ячейку моей таблицы. У меня есть 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 отдельных функций обработки каждого конкретного события ячейки?

Answer 1

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); 
}); 

Answer 2

Если каждая из ссылок имеет общий класс (или вы можете дать им один), вы можете использовать его как селектор. Кроме того, добавьте что-то вроде 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' и так далее.

Answer 3

Добавьте атрибут данных DOW = «2» и данные дней = «Среда» для каждого комментария ссылку, удалить идентификатор = «wednesdayCommentLink» и добавить класс = «commentLink».

<a class="wednesdayCommentLink">link</a> 

становится

<a class="commentLink" data-dow="2" data-day="wednesday">link</a> 

Сделайте то же самое для #wednesdayComment (.comment) и #wednesdayCommentText (.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); 
}); 

Answer 4

Я уверен, что есть много, что можно сделать. Но когда рефакторинг я рекомендую начинать с малого. Таким образом, сначала просто переместить общий код обработчика событий в отдельные функции:

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 

Answer 5

Что бы сделать, это создать класс для commentLinks так что вы можете написать только один раз щелкните событие для каждого элемента, и я бы не удалить идентификатор, чтобы сделать что-то вроде:

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); 
}); 

и это все.