好奇如何定位多個具有相同功能的類

我正在構建一個表單，我正在嘗試使用我構建的這個函式的“DRY”（不要重復自己）編碼概念。我的目標是使用一個函式并將其放在每個標簽上，這樣當我在輸入欄位中輸入時，它會將樣式應用到我當前正在輸入的欄位中。

這是我現在所擁有的，我之前嘗試使用 for 回圈并將樣式同時應用于每個欄位，但我不能這樣做。此處的此函式僅將其應用于單個欄位，因此我每次都必須為每個輸入重新創建它。

另外，如果有幫助，我將它與 HTML 標簽上的“onchange='newStyling(this)'”掛鉤！

function newStyling(that) {
  if (that.value != null && that.value != "") {
    document.getElementsByClassName('label')[0].style.opacity = "0.65";
    document.getElementsByClassName('label')[0].style.transform = "scale(0.85) 
    translateY(-0.5 rem) translateX(0.15 rem)";
  }
}

<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" class="" id="firstname" placeholder="First Name" onchange="newStyling(this)"> 
    </span>
    <label for="floatingFirstName" class="label">First Name <span style="color: red;">*</span></label>
    <!-- <nlfirstname></nlfirstname> -->
  </div>
</div>
<script>
  document.getElementById("firstname").setAttribute("placeholder", "First Name");
  document.getElementById("firstname").setAttribute("class", "form-control");
  document.getElementById("firstname").setAttribute("id", "floatingFirstName");
</script>

<!-- Last Name Input -->
<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" class="" id="lastname" placeholder="" onchange="newStyling(this)"> 
      <!-- <nllastname></nllastname> -->
    </span>
    <label for="floatingFirstName" class="label">Last Name <span style="color: red;">*</span></label>
  </div>
</div>
<script>
  document.getElementById("lastname").setAttribute("placeholder", "Last Name");
  document.getElementById("lastname").setAttribute("class", "form-control");
  document.getElementById("lastname").setAttribute("id", "floatingFirstName");
</script>

uj5u.com熱心網友回復：

我想您需要找到<label>輸入的旁邊，在您的 HTML 中，它們有一個共同的 parent div.custom_floating，跟蹤到共同的 parent 并向下跟蹤到標簽。

function newStyling(that) {
  if (that.value != null && that.value != "") {
    that.closest('.custom_floating').querySelector('.label').style.opacity = "0.65";
    that.closest('.custom_floating').querySelector('.label').style.transform = "scale(0.85) translateY(-0.5 rem) translateX(0.15 rem)";
  }
}

<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" class="" id="firstname" placeholder="First Name" onchange="newStyling(this)"> 
    </span>
    <label for="floatingFirstName" class="label">First Name <span style="color: red;">*</span></label>
    <!-- <nlfirstname></nlfirstname> -->
  </div>
</div>
<script>
  document.getElementById("firstname").setAttribute("placeholder", "First Name");
  document.getElementById("firstname").setAttribute("class", "form-control");
  document.getElementById("firstname").setAttribute("id", "floatingFirstName");
</script>

<!-- Last Name Input -->
<div class="col-md-3">
  <div class="custom_floating mb-3">
    <span>
      <input type="text" class="" id="lastname" placeholder="" onchange="newStyling(this)"> 
      <!-- <nllastname></nllastname> -->
    </span>
    <label for="floatingFirstName" class="label">Last Name <span style="color: red;">*</span></label>
  </div>
</div>
<script>
  document.getElementById("lastname").setAttribute("placeholder", "Last Name");
  document.getElementById("lastname").setAttribute("class", "form-control");
  document.getElementById("lastname").setAttribute("id", "floatingFirstName");
</script>

標籤：javascript 查询 前端

上一篇：如果使用javascript按下后退按鈕，則警告網路用戶

下一篇：Vue如何根據間隔觸發點擊鏈接