Javascript 简化jQuery事件

我编写这些函数是为了在单击表的特定单元格时处理数据。我有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);
    }); 

//注释处理
$（“#周一评论链接”）。单击（函数（）{
var mondayhtmls=$（“#mondayComment”）；
变量输入=$（“”）；
input.val（data.days[0].comment）；
html（输入）；
});
$（“#周二评论链接”）。单击（函数（）{
var tuesdayhtmls=$（“#tuesdayComment”）；
变量输入=$（“”）；
input.val（data.days[1].注释）；
html（输入）；
});
$（“#周三评论链接”）。单击（函数（）{
var htmls=$（“#周三评论”）；
变量输入=$（“”）；
input.val（data.days[2].注释）；
html（输入）；
});
$（“#thursdayCommentLink”）。单击（函数（）{
var htmls=$（“周四会议”）；
变量输入=$（“”）；
input.val（data.days[3].注释）；
html（输入）；
});
$（“#fridayCommentLink”）。单击（函数（）{
var htmls=$（“#fridayComment”）；
变量输入=$（“”）；
input.val（data.days[4].注释）；
html（输入）；
});
$（“#saturdayCommentLink”）。单击（函数（）{
var htmls=$（“#saturdayComment”）；
变量输入=$（“”）；
input.val（data.days[5].注释）；
html（输入）；
}); 

---

是否有一种方法可以简化此代码，或者使其比使用6个单独的函数处理每个特定的单元格事件更优雅？

如果每个链接都有一个公共类（或者您可以给它们一个），那么您可以将其用作选择器。此外，将类似于

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'

等等。

如果每个链接都有一个公共类（或者你可以给它们一个），那么你可以使用它作为选择器。此外，将类似于

data day=“1”

的内容添加到标记中，数字对应于位置（0表示星期一，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);
});

然后，从以下内容开始您的功能：

var day = this.id.match(/(\w+)CommentLink/)[1],
    comment = data.dats[this.getAttribute("data-day")].comment;

然后你可以做一些事情，比如

$（“#”+day+“Comment”）

，

id='“+day+”CommentText'

等等。

var dayNums={“星期一”：0，“星期二”：1，“星期三”：2，“星期四”：3，“星期五”：4，“星期六”：5}；
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);
});

$（“#周一评论链接，#周二评论链接，#周三评论链接，#周四社区链接，#周五评论链接，#周六评论链接”）。单击（函数（）{
var day=$（this.attr（“id”）.replace（/CommentLink$/，“”）；
var htmls=$（“#”+day+“注释”）；
变量输入=$（“”）；
input.val（data.days[dayNums[day]].comment）；
html（输入）；
});

var dayNums={“星期一”：0，“星期二”：1，“星期三”：2，“星期四”：3，“星期五”：4，“星期六”：5}；
$（“#周一评论链接，#周二评论链接，#周三评论链接，#周四社区链接，#周五评论链接，#周六评论链接”）。单击（函数（）{
var day=$（this.attr（“id”）.replace（/CommentLink$/，“”）；
var htmls=$（“#”+day+“注释”）；
变量输入=$（“”）；
input.val（data.days[dayNums[day]].comment）；
html（输入）；
});

将属性data dow=“2”和data day=“周三”添加到每个评论链接中，删除id=“wednesdayCommentLink”并添加class=“commentLink”

链接

变成

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

链接

对#wednesdayComment（.comment）和#wednesdayCommentText（.commentText）执行相同的操作，分别添加数据属性

然后，使用以下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);
});

$（“.commentLink”）。单击（函数（）{
var-dow=$（this.attr（'data-dow'）；
var day=$（this.attr（'data-day'）；
变量输入=$（''）；
input.val（data.days[dow].comment）；
$（'.comment[data-dow=“'+dow+'“]”）html（输入）；
});

将属性data dow=“2”和data day=“周三”添加到每个评论链接中，删除id=“wednesdayCommentLink”并添加class=“commentLink”

链接

变成

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

链接

对#wednesdayComment（.comment）和#wednesdayCommentText（.commentText）执行相同的操作，分别添加数据属性

然后，使用以下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);
});

$（“.commentLink”）。单击（函数（）{
var-dow=$（this.attr（'data-dow'）；
var day=$（this.attr（'data-day'）；
变量输入=$（''）；
input.val（data.days[dow].comment）；
$（'.comment[data-dow=“'+dow+'“]”）html（输入）；
});

我相信还有很多事情可以做。但在重构时，我建议从小规模开始。因此，首先只需将事件处理程序的公共代码移动到一个单独的函数中：

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

---

我相信还有很多事情可以做。但在重构时，我建议从小规模开始。因此，首先只需将事件处理程序的公共代码移动到一个单独的函数中：

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

---

我要做的是为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);
});

jQuery（'.commentLink'）。单击（函数（）{
var elementId=jQuery（this.attr（'id'）；
var sectionName=elementId.substring（0，elementId.lastIndexOf（'Link'）；
var htmls=jQuery（“#”+sectionName）；
var输入=jQuery（“”）；
html（输入）；
});

---

仅此而已。

我要做的是为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);
});

jQuery（'.commentLink'）。单击（函数（）{
var elementId=jQuery（this.attr（'id'）；
var sectionName=elementId.substring（0，elementId.lastIndexOf（'Link'）；
var htmls=jQuery（“#”+sectionName）；
var输入=jQuery（“”）；
html（输入）；
});

---

仅此而已。

这是一种代码审查，它将继续进行，这是一种