0

テーブルの特定のセルがクリックされたときにデータを処理するために、これらの関数を作成しました。イベントのデータを処理する 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 つの個別の関数で処理するよりもエレガントにする方法はありますか?

4

5 に答える 5

2

各コメント リンクに属性 data-dow="2" および data-day="wednesday" を追加し、id="wednesdayCommentLink" を削除して、class="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);
});
于 2013-06-06T16:18:28.187 に答える
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'。

于 2013-06-06T16:12:52.240 に答える
1

できることはたくさんあると確信しています。しかし、リファクタリングするときは、小さく始めることをお勧めします。まず、イベント ハンドラの共通コードを別の関数に移動します。

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
于 2013-06-06T16:22:52.170 に答える
0 
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);
});
于 2013-06-06T16:15:35.027 に答える