javascript - 处理 2 个元素的更改

Question

我有以下代码

jQuery(document).ready(function(jQ) {                   
		jQ('.WorkType').on("change", function(){
			if (jQ(this).val() == 'Standard Hours'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
			}else if (jQ(this).val() == 'RDO'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");				
			}else{
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
			}
			window.setTimeout(function () {
				jQ(".Calc_Hours").sum("focusout", "#standard_hours");
				jQ(".Calc_Leave").sum("focusout", "#leave_hours");
				jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
				},1000);
		})	
	})

此代码在对具有类 WorkType 的元素进行更改时遍历 dom，并修改位于 div DayTimeWrapper 内的 Hours 元素的类属性。然后执行计算并将结果放入具有指定 ID 的元素中。

效果很好

但是，我需要对类设置为 setTime 的其他元素执行相同的计算，因此我修改了代码，如下

jQuery(document).ready(function(jQ) {                   
		jQ('.WorkType,.setTime').on("change", function(){
			if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'Standard Hours'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Hours");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
			if (jQ('.DayTimeWrapper').closest('.WorkType').val() == 'RDO'){
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");				
			}else{
				jQ(this).closest('.DayTimeWrapper').find('.Hours').addClass("Calc_Leave");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_RDO");
				jQ(this).closest('.DayTimeWrapper').find('.Hours').removeClass("Calc_Hours");
			}
			window.setTimeout(function () {
				jQ(".Calc_Hours").sum("focusout", "#standard_hours");
				jQ(".Calc_Leave").sum("focusout", "#leave_hours");
				jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
				},1000);
		})	
	})

这不起作用，我正在努力找出原因。控制台中的错误是

未捕获的语法错误:意外的标记)

任何解决此问题的帮助将不胜感激

Answer 1

您没有在第一个 if 语句后关闭括号。我已经优化了您的选择器的性能和可读性:

jQuery(document).ready(function (jQ) {
    jQ('.WorkType,.setTime').on("change", function () {
        var $hours = jQ(this).closest('.DayTimeWrapper').find('.Hours');
        var workType = jQ('.DayTimeWrapper').closest('.WorkType').val();
        if (workType == 'Standard Hours') {
            $hours.addClass("Calc_Hours");
            $hours.removeClass("Calc_Leave");
            $hours.removeClass("Calc_RDO");
        } else if (workType == 'RDO') {
            $hours.addClass("Calc_RDO");
            $hours.removeClass("Calc_Leave");
            $hours.removeClass("Calc_Hours");
        } else {
            $hours.addClass("Calc_Leave");
            $hours.removeClass("Calc_RDO");
            $hours.removeClass("Calc_Hours");
        }

        // The following code seems to be corrupt:
        window.setTimeout(function () {
            jQ(".Calc_Hours").sum("focusout", "#standard_hours");
            jQ(".Calc_Leave").sum("focusout", "#leave_hours");
            jQ(".Calc_RDO").sum("focusout", "#rdo_hours");
        }, 1000);

    })
});

编辑:

这似乎就是您想要做的:

https://jsfiddle.net/mk07fof5/1/

$('.WorkType,.setTime').on("change", function() {
    var $currRow = $(this).closest('.DayTimeWrapper'),
        $allRows = $currRow.closest('.DayTimeTable').find('.DayTimeWrapper');

    calculate($currRow); //pass the element which triggered the event

    var CalcHours = 0,
        MealHours = 0,
        RdoHours = 0;

    $allRows.each(function(i) {
        $row = $(this);
        var hours = ParseFloat($row.find('.Hours').val());
        if(!hours) return;
        var workType = $row.find('.WorkType').val();
        switch (workType) {
            case 'Standard Hours':
                CalcHours += hours;
                break;
            case 'RDO':
                RdoHours += hours;
                break;
            default:
                MealHours += hours;
        }
    });

    $("#standard_hours").html(CalcHours.toFixed(2));
    $("#leave_hours").html(MealHours.toFixed(2));
    $("#rdo_hours").html(RdoHours.toFixed(2));
});

不要忘记将表格包装到这个 div 中:

<div class="DayTimeTable">[...]</div>