為常見的html元素重用JavaScript的最佳方法

我有一個 HTML 表單，它從下拉串列中獲取值。選擇一個選項后，HTML 標記會更新以顯示“好”或“壞”狀態。

每個徽章元素跨度類都相同，但 ID 不同，因為我需要捕獲結果。

有沒有一種方法可以對所有 span 類使用單個 JavaScript 函式，但只更新下拉框所在位置的 span 類？

或者我是否需要在 JavaScript 函式中定義每個元素 ID。

該<span 是每個徽章。

const changeBadgeColour = document.getElementById('project-tier-entry-level');

changeBadgeColour.addEventListener('change', function() {
  var p_status = document.getElementById("project-tier-entry-level");
  p_status_value = p_status.options[p_status.selectedIndex].value;


  const statusBadge = document.getElementById('project-tier-entry-level-status');
  if (p_status_value === "Yes") {

    document.getElementById('project-tier-entry-level-status').className = 'badge badge-soft-success'
    document.getElementById('project-tier-entry-level-status').textContent = 'Good!'

  } else {
    document.getElementById('project-tier-entry-level-status').className = 'badge badge-soft-danger'
    document.getElementById('project-tier-entry-level-status').textContent = 'Bad!'
  }

  console.log()

});

<div class="col-sm-6">
  <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered entry levels?</label>
  <span class="badge badge-soft-success" id="project-tier-entry-level-status"></span>
  <select class="form-control" name="choices-single-no-sorting" id="project-tier-entry-level">
    <option value="" disabled selected hidden>Please Choose...</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

uj5u.com熱心網友回復：

你可以委托

document.getElementById('container').addEventListener('change', function(e) {
  const tgt = e.target;
  if (tgt.tagName === "SELECT" && tgt.id.startsWith("project-tier")) { // in case there are other things that can change in that container
    const yes = tgt.value === "Yes"
    const statusBadge = tgt.previousElementSibling; // or tgt.closest('div').querySelector('span.badge');
    statusBadge.classList.toggle("badge-soft-success", yes)
    statusBadge.classList.toggle("badge-soft-danger", !yes)
    statusBadge.textContent = yes ? 'Good!' : 'Bad!';
  }
});

<div id="container">
  <div class="col-sm-6">
    <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered entry levels?</label>
    <span class="badge badge-soft-success" id="project-tier-entry-level-status"></span>
    <select class="form-control" name="choices-single-no-sorting" id="project-tier-entry-level">
      <option value="" disabled selected hidden>Please Choose...</option>
      <option>Yes</option>
      <option>No</option>
    </select>
  </div>

  <div class="col-sm-6">
    <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered normal levels?</label>
    <span class="badge badge-soft-success" id="project-tier-normal-level-status"></span>
    <select class="form-control" name="choices-single-no-sorting" id="project-tier-normal-level">
      <option value="" disabled selected hidden>Please Choose...</option>
      <option>Yes</option>
      <option>No</option>
    </select>
  </div>
</div>

三個選項：

document.getElementById('container').addEventListener('change', function(e) {
  const tgt = e.target;
  if (tgt.tagName === "SELECT" && tgt.id.startsWith("project-tier")) { // in case there are other things that can change in that container
    const badge = tgt.value
    const statusBadge = tgt.previousElementSibling; // or tgt.closest('div').querySelector('span.badge');
    statusBadge.classList.toggle("badge-soft-success", badge==="Yes")
    statusBadge.classList.toggle("badge-soft-danger",  badge==="No")
    statusBadge.classList.toggle("badge-soft-unknown",  badge==="Unknown")
    const text = {"Yes":"Good!","No":"Bad!","Unknown":"Unknown!"}[badge] || "What?"
    
    statusBadge.textContent = text
  }
});

<div id="container">
  <div class="col-sm-6">
    <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered entry levels?</label>
    <span class="badge badge-soft-success" id="project-tier-entry-level-status"></span>
    <select class="form-control" name="choices-single-no-sorting" id="project-tier-entry-level">
      <option value="" disabled selected hidden>Please Choose...</option>
      <option>Yes</option>
      <option>No</option>
      <option>Unknown</option>
    </select>
  </div>

  <div class="col-sm-6">
    <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered normal levels?</label>
    <span class="badge badge-soft-success" id="project-tier-normal-level-status"></span>
    <select class="form-control" name="choices-single-no-sorting" id="project-tier-normal-level">
      <option value="" disabled selected hidden>Please Choose...</option>
      <option>Yes</option>
      <option>No</option>
      <option>Unknown</option>
      <option></option>
    </select>
  </div>
</div>

uj5u.com熱心網友回復：

如果您changeBadgeColour使用 querySelectorAll將類名直接分配給您的變數如何。

const changeBadgeColour = document.querySelectorAll('.badge .badge-soft-success')

標籤：javascript

上一篇：Javascript/html顯示警報，包括標簽輸入

下一篇：我無法在按鈕（onClick（））上的函式呼叫中訪問地圖函式的索引，這是在地圖（）的范圍內，代碼如下