javascript - 简化 jQuery 函数

标签 javascript jquery function simplify

<分区>

我编写了这个函数来处理传入的数据并用相应的数据填充表单。我想知道是否有更好的方法来简化这段代码:

    //Handling of "regular weeks" (no "blackouts" or empty days)
    //Itteration through specific day # to ensure specificity
    for (var a = 0; a < data.days.length; a++) {
        var default_start_time = data.days[a].default_start_time;
        var default_end_time = data.days[a].default_end_time;
        var select_start_time = data.days[a].start_time;
        var select_end_time = data.days[a].end_time;
        var time_chunk = data.days[a].time_chunk_id;

        if (data.days[a].day_of_week_Number == 2) {
            $("#mondayHead").html("Monday");
            $("#mondayDate").html(data.days[a].date);
            $("#mondayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#mondayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#mondayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subMonday = data.days[a].comment.substring(0, 10);
                //Comment is held not diplayed **to be fixed
                $("#mondayCommentLink").html(subMonday + "..." + "<input type='hidden' id='mondayCommentText' name='mondayCommentText' size='10' value=data.days[a].comment />");
            }
        }

        if (data.days[a].day_of_week_Number == 3) {
            $("#tuesdayHead").html("Tuesday");
            $("#tuesdayDate").html(data.days[a].date);
            $("#tuesdayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#tuesdayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#tuesdayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subTuesday = data.days[a].comment.substring(0, 10);
                $("#tuesdayCommentLink").html(subTuesday + "...");
            }
        }

        if (data.days[a].day_of_week_Number == 4) {
            $("#wednesdayHead").html("Wednesday");
            $("#wednesdayDate").html(data.days[a].date);
            $("#wednesdayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#wednesdayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#wednesdayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subWednesday = data.days[a].comment.substring(0, 10);
                $("#wednesdayCommentLink").html(subWednesday + "...");
            }
        }

        if (data.days[a].day_of_week_Number == 5) {
            $("#thursdayHead").html("Thursday");
            $("#thursdayDate").html(data.days[a].date);
            $("#thursdayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#thursdayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#thursdayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subThursday = data.days[a].comment.substring(0, 10);
                $("#thursdayCommentLink").html(subThursday + "...");
            }
        }

        if (data.days[a].day_of_week_Number == 6) {
            $("#fridayHead").html("Friday");
            $("#fridayDate").html(data.days[a].date);
            $("#fridayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#fridayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#fridayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subFriday = data.days[a].comment.substring(0, 10);
                $("#fridayCommentLink").html(subFriday + "...");
            }
        }

        if (data.days[a].day_of_week_Number == 7) {
            $("#saturdayHead").html("Saturday");
            $("#saturdayDate").html(data.days[a].date);
            $("#saturdayStart").html(buid(default_start_time, default_end_time, select_start_time));
            $("#saturdayEndTime").html(buid(default_start_time, default_end_time, select_end_time));
            $("#saturdayTimeChunkID").val(time_chunk);
            if (data.days[a].comment != null) {
                var subSaturday = data.days[a].comment.substring(0, 10);
                $("#saturdayCommentLink").html(subSaturday + "...");
            }
        }

    }

我很好奇是否有一种方法可以使用两个 for 循环并遍历此函数来更新这些特定值。我觉得有一堆 if 语句不是很好的做法,看起来也不优雅。

最佳答案

有 switch/case 之类的东西,但对于这个来说,days 的对象似乎更合适:

for (var a = 0; a < data.days.length; a++) {
    var default_start_time = data.days[a].default_start_time,
        default_end_time   = data.days[a].default_end_time,
        select_start_time  = data.days[a].start_time,
        select_end_time    = data.days[a].end_time,
        time_chunk         = data.days[a].time_chunk_id,
        days               = {2: 'monday', 3: 'tuesday', 4: 'wednesday', 5: 'thursday', 6: 'friday', 7: 'saturday'},
        today              = days[data.days[a].day_of_week_Number];

    $("#"+today+"Head").html( today.charAt(0).toUpperCase() + today.slice(1) );
    $("#"+today+"Date").html(data.days[a].date);
    $("#"+today+"Start").html(buid(default_start_time, default_end_time, select_start_time));
    $("#"+today+"EndTime").html(buid(default_start_time, default_end_time, select_end_time));
    $("#"+today+"TimeChunkID").val(time_chunk);
    if (data.days[a].comment != null) {
        var subMonday = data.days[a].comment.substring(0, 10);
        $("#"+today+"CommentLink").html(subMonday + "..." + "<input type='hidden' id='"+today+"CommentText' name='"+today+"CommentText' size='10' value=data.days[a].comment />");
    }
}

关于javascript - 简化 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16950674/

相关文章:

javascript - 子性能变化的 polymer 变化事件

javascript - jQuery.when() 似乎没有在等待

php - 超过 30 秒的最大执行时间 swift mailer

c++ - 从函数返回 float 组

javascript - 在 fullPage 和 Vuejs 中绑定(bind)辅助功能

javascript - 为什么我的 jQuery .css 函数不工作?

javascript - Jquery:计算隐藏输入的宽度

c++ - 通过指向引用的指针修改类变量

jQuery UI : Autocomplete on multiple fields, 使用不同的源

jquery - 我可以暂时禁止元素更改 css 样式吗?