Блог

Главная - Вопросы по программированию - Проблема стиля руля на каждом div

Проблема стиля руля на каждом div

#javascript #node.js #handlebars.js

Вопрос:

В приведенном ниже коде я использовал handlebars.js для шаблонов, в которых он создает каждое пожертвование с сервера, но событие onClick не влияет на все повторяющиеся div, оно влияет только на первый div. Как исправить такую проблему с помощью handlebars.js?

 {{#each donations}}
    <div  id="changeCss">
        <h1>Donar name: {{donar}}</h1>
        <h1>Food item:{{fooditems}}</h1>
         <h1>Quantity:{{quantity}}</h1>
        <h1>Meeting point: {{meetingpoint}}</h1>
        <h1>Food type: {{foodtype}}</h1>
        <h1>Contact no: {{contactno}}</h1>
        <button onclick="changed()" id="idOfButton">I will deliver</button>
    </div>
{{/each}}

<script> 
      function changed(){
      document.getElementById('changeCss').style.cssText ='background-color:green; color:white' ;
      document.getElementById("idOfButton").disabled= true;
          
</script>

Комментарии:

1. Недопустимо, чтобы один и тот же идентификатор HTML дублировался во многих элементах. Я думаю, вам следует найти решение, в котором используется селектор, отличный от ID.

Ответ №1:

Вы создаете много div блоков с одним и тем же идентификатором changeCss , и
document.getElementById('changeCss') всегда обращайтесь к первому соответствующему div.

Я предполагаю, что вы хотите изменить только div, в котором нажата кнопка. 1 решение состоит в том, чтобы передать текущую кнопку в качестве параметра changed функции. Затем мы применяем CSS к родительскому элементу (div) и отключаем текущую кнопку.

Приведенный ниже код демонстрирует то, что я сказал для 2 одинаковых блоков. `

  function changed(element){
      // element is the button you clicked
      element.parentElement.style.cssText ='background-color:green; color:white' ;
      element.disabled= true;
 } 
   <div  id="changeCss">
        <h1>Donar name: {{donar}}</h1>
        <h1>Food item:{{fooditems}}</h1>
         <h1>Quantity:{{quantity}}</h1>
        <h1>Meeting point: {{meetingpoint}}</h1>
        <h1>Food type: {{foodtype}}</h1>
        <h1>Contact no: {{contactno}}</h1>
        <button onclick="changed(this)" id="idOfButton">I will deliver</button>
  </div>
    
  <div  id="changeCss">
        <h1>Donar name: {{donar}}</h1>
        <h1>Food item:{{fooditems}}</h1>
         <h1>Quantity:{{quantity}}</h1>
        <h1>Meeting point: {{meetingpoint}}</h1>
        <h1>Food type: {{foodtype}}</h1>
        <h1>Contact no: {{contactno}}</h1>
        <button onclick="changed(this)" id="idOfButton">I will deliver</button>
  </div>
Метки: