Блог

Мне не нужно значение кнопки, но вместо этого мне нужно значение промежутка внутри div, которое соответствует этой кнопке. У меня есть модель, в которой кнопки соответствуют div.

Например, здесь вы можете видеть, что есть 3 кнопки, соответствующие каждому назначению.

Всякий раз, когда пользователь нажимает кнопку «Назначить», мне нужно возвращать значение интервала заголовка, например, если кто-то сначала нажимает «Назначить», в консоли должно быть напечатано «Английский UOI 1».

HTML-код завершается следующим образом —

 <div class="assignment-wrapper">
    <div class="assignment-title"><span class="assignment-name">English UOI 1</span><span>15-06-2021</span></div>
    <div class="assignment-functions">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
    </div>
</div>
 

Теперь это пример структуры, но я бы делал это с помощью javascript, я получил данные для базы данных, и мне нужно представить каждое задание в табличной форме.

Если у вас есть лучшая модель, вы можете предложить изменения. Любая помощь будет признательна.

Вы можете нацелиться на 2 родителя в дереве элементов, а затем вернуться к двум дочерним элементам и получить текстовое содержимое spans.

 const btn = document.querySelectorAll('.assignment-function-btn')

function getValue(e){
  let target = e.target.parentNode.parentNode.children[0].children[0]
  console.log(target.textContent)
}

btn.forEach(button => {
  button.addEventListener('click', getValue)
}) 

 .row {
  display: flex;
  justify-content: space-around;
}

.assignment-function-btn {
  background: #ddd;
  border: 1px solid black;
  border-radius: 5px;
  margin-left: 5px;
  padding: 3px;
  cursor: pointer;
} 

   <div class="assignment-wrapper row">
    <div class="assignment-title">
       <span class="assignment-name">English UOI 1</span>    
       <span>15-06-2021</span>
    </div>
    <div class="assignment-functions row">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
    </div>
</div> 

или…

Если каждый из этих классов, скажем, имеет свою собственную строку с тремя кнопками для каждого заголовка/класса, вы можете закодировать атрибут набора данных в родительский элемент buttons, представляющий заголовок/класс, для которого используется кнопка. Смотрите мой второй фрагмент для этого примера…

Использование атрибута набора данных:

В своем HTML вы добавляете атрибут данных, например data-class-name="English UOI 1" , в прямой родительский элемент ваших кнопок. Затем используйте целевой объект события родительский код, чтобы получить e.target.parentNode.dataset.className .

className является ли javascript верблюжьим случаем для class-name .

     <div class="assignment-title">
      <span class="assignment-name">English UOI 1</span>
      <span>15-06-2021</span>
    </div>
    <!--/ Here we add the data attribute data-class-name="English UOI 1" /-->
    <div data-class-name="English UOI 1" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
 

 const btn = document.querySelectorAll('.assignment-function-btn')

function getValue(e) {
  let target = e.target.parentNode
  console.log(target.dataset.className)
}

btn.forEach(button => {
  button.addEventListener('click', getValue)
}) 

 .row {
  display: flex;
  justify-content: space-around;
}

.assignment-title {
  flex: auto;
}

.assignment-function-btn {
  background: #ddd;
  border: 1px solid black;
  border-radius: 5px;
  margin-left: 5px;
  padding: 3px;
  cursor: pointer;
} 

 <div class="assignment-wrapper">
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">English UOI 1</span>
      <span>15-06-2021</span>
    </div>
    <div data-class-name="English UOI 1" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">Social Sciences</span>
      <span>23-06-2021</span>
    </div>
    <div data-class-name="Social Sciences" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">Concepts of Algebra</span>
      <span>26-06-2021</span>
    </div>
    <div data-class-name="Concepts of Algebra" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
</div> 

Вы могли бы использовать .closest , чтобы захватить .assignment-wrapper дерево DOM, а затем внутри оболочки найти .assignment-name элемент. Тогда хватай ее innerText .

Редактировать: Кроме того, я настоятельно рекомендую использовать button элементы для поведения кнопок в целях обеспечения специальных возможностей.

 const btn = document.querySelector(".assign-task");
btn.addEventListener("click", (e) => {
  const wrapper = e.target.closest(".assignment-wrapper");
  const assignment = wrapper.querySelector(".assignment-name");
  console.log(assignment.innerText);
}) 

 <div class="assignment-wrapper">
    <div class="assignment-title"><span class="assignment-name">English UOI 1</span><span>15-06-2021</span></div>
    <div class="assignment-functions">
        <button class="assign-task assignment-function-btn">Assign</button>
        <button class="update-task assignment-function-btn">Update</button>
        <button class="view-results assignment-function-btn">Results</button>
    </div>
</div> 

• что я понимаю о вас, так это то, что вы хотите отправить текст .assignment-title span ошибок родителю этой кнопки

Вот Пример

 var assignTask = document.getElementsByClassName('assign-task');
for(var i = 0; i < assignTask.length; i  ) {
   assignTask[i].addEventListener('click',function() {
      var text = this.parentNode.parentNode.getElementsByClassName('assignment-name')[0].innerText;
      console.log(text)
   })
}
 

Вы можете попробовать следующее

     <div class="assignment-wrapper">
      <div class="assignment-title">
        <span class="assignment-name">English UOI 1</span
        ><span>15-06-2021</span>
      </div>
      <div class="assignment-functions">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
      </div>
    </div>

    <script>
      function handleButtonClick(event) {
        const buttonType = event.target.innerText;
        const assignmentName = event.target
          .closest(".assignment-wrapper")
          .querySelector(".assignment-name").innerText;
        console.log(`${assignmentName} -> ${buttonType}`);
      }

      document
        .querySelectorAll(".assignment-function-btn")
        .forEach((ele) => ele.addEventListener("click", handleButtonClick));
    </script>