想知道如何定位多个具有相同功能的 class

Question

我正在构建一个表单，我正在尝试将 '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>

Answer 1

我想你需要找到输入旁边的 <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>

想知道如何定位多个具有相同功能的 class

Curious on how to target more than one class with same function

javascript

jquery

frontend