Dynami c Случай переключения Javascript с добавлением значения к другой переменной

Question

Я хочу сделать переключение с динамическим c контентом в javascript, я приведу пример, который я использую 3 cases:

    for (var i = 1; i <= count; i++) {

        switch(hari) 
        {
            case 'senin':
                senin 
                += '<tr class="' + arr[i] + '">';
                senin 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                senin 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                senin 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                senin 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                senin 
                += '</tr>';
            break;
            case 'selasa':
                selasa 
                += '<tr class="' + arr[i] + '">';
                selasa 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                selasa 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                selasa 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                selasa 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                selasa 
                += '</tr>';
            break;
            case 'rabu':
                rabu 
                += '<tr class="' + arr[i] + '">';
                rabu 
                += '<td class="td'+hari + i + '">' + i + '</td>';
                rabu 
                += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
                rabu 
                += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
                rabu 
                += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+hari + i + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
                rabu 
                += '</tr>';
            break;
        }
    }

Я думаю поставить все случаи в массив как это: ['senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu']

Но я не знаю, как это выразить переключатель наиболее оптимизированным способом

У кого-нибудь есть другое решение, чтобы сделать его коротким?

Answer 1

Вы можете дать себе функцию для построения текста, принимая параметры для различных частей:

function addContent(target, cls1, cls2, i) {
    target += '<tr class="' + cls1 + '">';
    target += '<td class="td'+cls2 + '">' + i + '</td>';
    target += '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>';
    target += '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>';
    target += '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+cls2 + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>';
    target += '</tr>';
    return target;
}

(нет необходимости в +=, кстати, см. Ниже ... )

Тогда:

for (var i = 1; i <= count; i++) {
    switch(hari) {
        case 'senin':
            senin = addContent(senin, arr[i], hari + i, i);
            break;
        case 'selasa':
            selasa = addContent(selasa, arr[i], hari + i, i);
            break;
        case 'rabu':
            rabu = addContent(rabu, arr[i], hari + i, i);
            break;
    }
 }

Если вы обнаружите, что часто используете switch для адресации таких переменных, как это часто, рассмотрите возможность помещения переменных в объект как свойства:

var theObject = {
    senin: ...,
    salasa: ...,
    rabu: ...
};

Затем вы можете обратиться к ним следующим образом: theObject[hari]:

theObject[hari] = addContent(theObject[hari], arr[i], hari + i, i);

---

Нет необходимости в серии += обновления одной и той же переменной, вы можете просто используйте +:

function addContent(target, cls1, cls2, i) {
    return target 
        + '<tr class="' + cls1 + '">'
        + '<td class="td'+cls2 + '">' + i + '</td>'
        + '<td> <input type="time" class="form-control" name="waktu_1[]"> </td>'
        + '<td> <input type="time" class="form-control" name="waktu_2[]"> </td>'
        + '<td> <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel'+cls2 + '"><option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option><option value="upacara">upacara</option></select> </td>'
        + '</tr>';
}

Answer 2

Это возможно, если вы измените определения переменных. Какими бы ни были переменные senin, selasa et c, определите их все как свойства как объект, вместо того, чтобы иметь много автономных имен переменных. Например, вместо

var senin = 'some string';
var selasa = 'some other string';
// ...

do

var htmlsByCase = {
  senin: 'some string',
  selasa: 'some other string',
  // ...
};

Тогда вы можете просто найти свойство объекта вместо использования switch. Вы также можете использовать литералы шаблона, чтобы сделать его более читабельным:

if (htmlsByCase[hari]) {
  htmlsByCase[hari] +=  `
    <tr class="${arr[i]}">
      <td class="td${hari}${i}">${i}</td>
      <td> <input type="time" class="form-control" name="waktu_1[]"> </td>
      <td> <input type="time" class="form-control" name="waktu_2[]"> </td>
      <td>
        <select class="form-control jenis_mapel" name="jenis_mapel[]" id="jenisMapel${hari}${i}">
          <option value="pelajaran">pelajaran</option><option value="istirahat">istirahat</option>
          <option value="upacara">upacara</option>
        </select>
      </td>
    </tr>
  `;
}

Если параметр hari гарантированно будет одним из тех ['senin','selasa','rabu','kamis','jumat','sabtu'], которые теперь являются свойствами объекта, тогда нет необходимости для оператора if в приведенном выше блоке кода.