javascript - 压缩 IF 语句似乎结束了

Question

JQuery 的新手，我有以下代码，我认为它有点过头了，因为我正在尝试做的是将返回值与按钮选择匹配并添加/删除类。

星期几按钮的 HTML

<div class="form-horizontal" id="selectWeekdaysSection">
    <div class="form-group">
        <div class="col-md-offset-2 col-lg-4">
            <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button" value="Mon">Mon</button>
            <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button" value="Tue">Tue</button>
            <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button" value="Wed">Wed</button>
            <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button" value="Thur">Thur</button>
            <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button" value="Fri">Fri</button>
            <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sat">Sat</button>
            <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button" value="Sun">Sun</button>
        </div>
    </div>
</div>

在网站上给出这个

DataTable数据

当我调用并从我的 DataTable 取回数据时，它会从 JSON 中预先选择日期。我已经完成了所有这些工作，但正如我所说，必须继续重复 IF 只是为了一个不同的按钮，尤其是当我必须在 '01 - 31' 天执行此操作时

Jquery

var selectedDays = modifyRecordData.selectedDays;
var splitSelectedDays = selectedDays.split(',');

splitSelectedDays.forEach(day => {
    let val = day.trim();

    if(val == 'Mon') {
        $('#mon').removeClass('btn-default');
        $('#mon').addClass('btn-primary');
    }

    if (val == 'Tue') {
        $('#tue').removeClass('btn-default');
        $('#tue').addClass('btn-primary');
    }

    if (val == 'Wed') {
        $('#wed').removeClass('btn-default');
        $('#wed').addClass('btn-primary');
    }

    if (val == 'Thur') {
        $('#thur').removeClass('btn-default');
        $('#thur').addClass('btn-primary');
    }

    if (val == 'Fri') {
        $('#fri').removeClass('btn-default');
        $('#fri').addClass('btn-primary');
    }

    if (val == 'Sat') {
        $('#sat').removeClass('btn-default');
        $('#sat').addClass('btn-primary');
    }

    if (val == 'Sun') {
        $('#sun').removeClass('btn-default');
        $('#sun').addClass('btn-primary');
    }
})

返回数据的Console.Log

Answer 1

您要遵循的技术称为“不要重复自己”，简称 DRY。

在这种情况下，day 始终与您要定位的元素的 id 相同，因此您可以从中手动构建一次选择器字符串。您还可以使用 toggleClass() 代替备用 addClass() 和 removeClass() 调用。试试这个:

splitSelectedDays.forEach(day => {
  let dayName = day.trim().toLowerCase();
  $('#' + dayName).toggleClass('btn-default btn-primary');
})