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 取回数据时，它会从 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.返回数据的日志

Answer 1

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

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

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