Блог

При выполнении javascript в HTML с использованием ejs среди переменных, передаваемых при рендеринге в бэкэнде, есть переменная, называемая «Группа классов». Я хочу использовать эту группу классов в javascript в теге сценария, а не в этом html, как я могу ее использовать? Метод lt;%= %gt; также не работает.

Не все исходные файлы были импортированы.

Когда функция createGroup() активируется нажатием кнопки » СОЗДАТЬ!», внутри нее определяется функция saveGroup (), и в предположении, что функция активирована, я хочу проверить дубликаты данных вместо их безусловного сохранения. Переменная «Группа классов» содержит несколько блоков данных, и каждый блок имеет переменную, в которой хранится «приоритет». Я хочу вызвать эти переменные и запустить цикл. Причина запуска цикла заключается в том, чтобы сравнить число, содержащееся в переменной «приоритет», введенной на этот раз, с «приоритетами» ранее сохраненных фрагментов данных, и вызвать предупреждение, если есть дубликат «приоритет».

Я хочу свободно использовать переменную ‘ClassGroup’, которая свободно используется внутри html-кода в функции внутри тега сценария ниже.

 lt;bodygt;  lt;section class="admin-content-area" id="admin-content-area"gt;  lt;%- include ./adminsidemenu %gt;  lt;div id="app"gt;  lt;hrgt;  lt;h1 class="ft-bold"gt;카테고리 관리lt;/h1gt;  lt;br/gt;lt;br/gt;   lt;button class="btn-line-normal" onclick="createGroup()"gt;CREATE!lt;/buttongt;lt;br/gt;lt;br/gt;  lt;% for(let i = 0 ; i lt; classGroup.length; i  ){ %gt;  lt;div class="group-id overview-wrapper" style = "display:inline-block" id="lt;%=classGroup[i]._id%gt;"gt;    lt;div class="ft-regular"gt;  lt;input type="checkbox" id="togBtnlt;%=i%gt;" style="display : none;" onchange="groupOpen(this, 'lt;%=classGroup[i]._id%gt;')" lt;% if(classGroup[i].is_open){ %gt; checked lt;%}%gt;/gt;  lt;label class="slider round" for="togBtnlt;%=i%gt;"gt;lt;/labelgt;  lt;/divgt;  lt;select name="category input-self default-select Shadow-lt-1" class="type" requiredgt;  lt;option value="" hiddengt;분류(필수 선택)lt;/optiongt;  lt;%if(classGroup[i].type == 'category'){%gt;  lt;option value="category" selectedgt;클래스lt;/optiongt;  lt;%}else{%gt;  lt;option value="category"gt;클래스lt;/optiongt;  lt;%}%gt;   lt;%if(classGroup[i].type == 'package'){%gt;  lt;option value="package" selectedgt;패키지lt;/optiongt;  lt;%}else {%gt;  lt;option value="package"gt;패키지lt;/optiongt;  lt;%}%gt;  lt;/selectgt;   lt;input type="text" class="weight text-field-base input-self" style="margin-left : 5%; width: 20%" value= "lt;%=classGroup[i].weight%gt;" placeholder="우선순위"gt;lt;br/gt;   lt;label class="label ft-regular" style="margin : 5px;"gt;카테고리명 :lt;/labelgt;  lt;input type="text" class="name text-field-base input-self" style="width: 70%; margin : 3px;" value="lt;%=classGroup[i].name%gt;"/gt;lt;br/gt;  lt;label class="label ft-regular" style="margin : 5px;"gt;부연 설명 :lt;/labelgt;  lt;input type="text" class="subContent text-field-base input-self" style="width: 70%; margin : 3px;" value="lt;%=classGroup[i].sub_content%gt;"/gt;lt;br/gt;lt;br/gt;    lt;label class="label ft-regular"gt;나열된 클래스lt;/labelgt;lt;br/gt;    lt;div class="class-list"gt;  lt;%for(let j =0; j lt; classGroup[i].class_list.length; j  ){%gt;  lt;div class='class' style="padding: 5px;"gt;  lt;select style = "display : inline-block; width : 70%;" name="class" id="class" requiredgt;  lt;option value="" hiddengt;클래스 선택lt;/optiongt;  lt;%for(let k =0; k lt; classList.length; k  ){%gt;  lt;%if(String(classList[k]._id) == String(classGroup[i].class_list[j]._id)){%gt;  lt;option value ="lt;%=classList[k]._id%gt;" selectedgt;lt;%=classList[k].class_title%gt;lt;/optiongt;  lt;%}else{%gt;  lt;option value="lt;%=classList[k]._id%gt;"gt;lt;%=classList[k].class_title%gt;lt;/optiongt;  lt;%}%gt;  lt;%}%gt;  lt;/selectgt;amp;emsp;lt;button class="btn-line-normal" onclick="deleteClass(this);"gt;클래스 삭제lt;/buttongt;lt;br/gt;  lt;/divgt;  lt;%}%gt;  lt;/divgt;    lt;button class ="btn-line-normal" style="margin-top : 10px" onclick="createClass(this)"gt;클래스 추가lt;/buttongt;lt;br/gt;    lt;button class="btn-line-normal" style="position: absolute; bottom: 5%;" onclick="updateGroup(this)"gt;수정 완료lt;/buttongt;lt;button style="position: absolute; right : 5%; bottom: 5%;" class="btn-line-normal" onclick="deleteGroup(this)"gt;카테고리 삭제lt;/buttongt;lt;br/gt;lt;br/gt;lt;br/gt;  lt;/divgt;    lt;%}%gt;  lt;/divgt;  lt;/sectiongt; lt;/bodygt;      lt;scriptgt;   function createGroup(){  let app = document.getElementById('app');  app.insertAdjacentHTML('beforeend', `lt;div class="group-id overview-wrapper" style = "display:inline-block;"gt;  lt;select name="category" class="type" requiredgt;  lt;option value="" hiddengt;분류(필수 선택)lt;/optiongt;  lt;option value="category"gt;클래스lt;/optiongt;  lt;option value="package"gt;패키지lt;/optiongt;  lt;/selectgt;lt;input type="text" class="weight text-field-base input-self" style="margin-left : 5%; width: 20%" value= "" placeholder="우선순위"gt;lt;br/gt;  lt;label class="label ft-regular" style="margin : 5px;"gt;카테고리명 : lt;/labelgt;lt;input type="text" class="name text-field-base input-self" style="width: 70%; margin : 3px;"; placeholder="카테고리 명 (필수)"gt;lt;br/gt;  lt;label class="label ft-regular" style="margin : 5px;"gt;부연 설명 : lt;/labelgt;lt;input type="text" class="subContent text-field-base input-self" style="width: 70%; margin : 3px;" placeholder="부연 설명(선택입력)"gt;lt;br/gt;lt;br/gt;    lt;label class="label ft-regular"gt;나열된 클래스lt;/labelgt;lt;br/gt;   lt;div class="class-list"gt;  lt;/divgt;    lt;button class="btn-line-normal" style="margin-top : 10px" onclick="createClass(this)"gt;클래스 추가lt;/buttongt;lt;br/gt;    lt;button class="btn-line-normal" style="position: absolute; bottom: 5%;" onclick="saveGroup(this)"gt;카테고리 저장lt;/buttongt;lt;button class="btn-line-normal" style="position: absolute; right : 5%; bottom: 5%;" onclick="deleteGroup(this)"gt;카테고리 삭제lt;/buttongt;lt;br/gt;lt;br/gt;lt;br/gt;  lt;/divgt;`)  }  function saveGroup(element){   let group = element.closest('.group-id');  let groupWeight = $(group.querySelector('.weight')).val();  let groupType = $(group.querySelector('.type')).val();  let groupName = $(group.querySelector('.name'))[0].value;  let groupSubContent = $(group.querySelector('.subContent'))[0].value;  let classListDom = group.querySelector('.class-list');  let classSelectDom = $(classListDom).children('div').children('select');    let classes = [];   for(let i = 0; i lt; classSelectDom.length; i  ){  classes.push(classSelectDom[i].value);  }   if(!groupType){  alert('분류를 선택해주세요!');  return;  }    // axios  axios.post('/admin/manage/group',   {groupType, groupWeight, groupName, groupSubContent, classes})  .then(res =gt; {  alert('카테고리 저장 완료!');  location.reload();  })  .catch(err =gt;{  console.error(error);  })  } lt;/scriptgt;