Я застрял в точке, где мне нужно показывать флажки динамически в зависимости от выбранного значения выпадающего списка. У меня есть код для этого, в котором я могу использовать для цикла до нужного числа, но есть ли способ уменьшить длинный длинный код. Ниже мой код.
if(drop_val == 'test')
{
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "chk_id";
var label = document.createElement('label')
label.htmlFor = "chk_id";
label.appendChild(document.createTextNode('test'));
document.getElementById('check').appendChild(checkbox);
document.getElementById('check').appendChild(label);
}.
Есть более компактные способы сделать все это с помощью jQuery или конкатенацией HTML, но, тем не менее, вы решили реализовать его, если вы делаете это несколько раз, поместите его в функцию с разумным именем. Я предполагаю (дайте мне знать, если я догадался не так!), Что вам нужен более компактный код, потому что вы копируете и вставляете его в кучу блоков if
. Это очень плохая идея. Это ужасно читать и быстро становится недостижимым.
Второй вариант, еще лучше, чем копирование и вставка всей пачки, состоит в том, чтобы объявить четыре переменные - параметры для функции ниже - перед вашей цепочкой if/else и ничего не делать в тех блоках if, но назначать разные идентификаторы или независимо от переменных. Затем создайте флажок один раз в конце всего, используя переменные, которые вы настроили. В любом случае вы записываете код создания один раз и подаете его параметры, которые изменяют его поведение. Это называется "параметризация" по причинам, которые теперь должны быть слишком очевидными.
И он позволяет превратить любой длинный и грязный фрагмент кода в самодокументирующийся однословный вызов функции, не полагаясь на что-либо умное в отношении среды. Конечно, вы должны узнать все, что можете о среде: очень часто кто-то еще написал именно ту функцию, которая вам нужна, но вы не можете рассчитывать на это.
if (drop_val == 'test')
{
createCheckbox('check', 'blah', 'Blah blah blah', false);
}
else if ( drop_val == 'Mae West' )
{
createCheckbox('check', 'maewest', 'Va va va voom', false);
}
// Snip...
function createCheckbox(parentID, chkID, labelText, isChecked)
{
var cb = document.createElement('input');
cb.type = "checkbox";
cb.name = chkID;
cb.value = "yes";
cb.id = chkID;
cb.checked = isChecked;
var lbl = document.createElement('label')
lbl.htmlFor = chkID;
lbl.appendChild(document.createTextNode(labelText));
document.getElementById(parentID).appendChild(cb);
document.getElementById(parentID).appendChild(lbl);
// If nobody wants this, they can just ignore it.
return { checkbox: cb, label: lbl };
}