在更改事件上添加 CSS class

Question

我有两个具有相同 class.I 的 Select 框，我正在尝试添加一个 class 以更改 select 选项。

HTML:

<select class="selectProduct" name="product_id[]">
  <option value="T-shirt">T-Shirt</option>
 </select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />

 <select class="selectProduct" name="product_id[]" style="width:400px;">
  <option value="shirt">Shirt</option>
 </select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />

jQuery:

$(document).on('change', '.selectProduct', function(e) {
  var idSize = $(this).val();
  $(this).find(".code").addClass(idSize);
});

Answer 1

您的 select 和输入在同一层次结构中，因此使用 next 获取输入并添加 class .

find 在您提供的元素中搜索，看看您的代码为何失败。

$(document).on('change', '.selectProduct', function(e) {
  var idSize = $(this).val();
  $(this).next(".code").addClass(idSize);
  $(this).next().next(".qty").addClass(idSize);
});

.shirt {
  outline: none !important;
  border: 1px solid red;
}
.T-shirt {
  outline: none !important;
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectProduct" name="product_id[]">
  <option value="T-shirt">T-Shirt</option>
  <option value="shirt">shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />

<select class="selectProduct" name="product_id[]" style="width:400px;">
  <option value="T-shirt">T-Shirt</option>
  <option value="shirt">Shirt</option>

</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />

Answer 2

如果 select 框有多个选项，用户只能更改值，如果我们将相关输入组合在一起，更容易找到正确的 .code 输入进行修改。

这是按照您的建议执行的代码的修订版本：

const container = document.querySelector('#container-div');
container.addEventListener('change', addValAsClass);

function addValAsClass(event){

  const codeBox = event.target.closest(".input-group").querySelector(".code");
  codeBox.classList.add(event.target.value);
  
  console.log(`classList: ${codeBox.getAttribute('class')}`);
}

div + div { margin-top: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-div">
  <div class="input-group">
    <select class="selectProduct">
      <option value="opt1">Opt 1</option>
      <option value="opt2">Opt 2</option>
    </select>
    <input placeholder="Code" class="code" />
    <input placeholder="Qty" class="qty" />
  </div>
  <div class="input-group">
    <select class="selectProduct">
      <option value="optA">Opt A</option>
      <option value="optB">Opt B</option>
    </select>
    <input placeholder="Code" class="code" />
    <input placeholder="Qty" class="qty" />
  </div>
</div>

Answer 3

我建议将 select + 输入包装到另一个 div，以便更容易找到。

您的代码可能无法正常工作，因为您的元素具有非唯一的 id（sku 和 qty）。

 <div>   <!-- wrapper start -->
     <select class="selectProduct" name="product_id[]">
     <option value="T-shirt">T-Shirt</option>
     </select>

     <input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
     <input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
 <div>   <!-- wrapper end -->

 <div>   <!-- wrapper start -->
     <select class="selectProduct" name="product_id[]">
     <option value="T-shirt">T-Shirt</option>
     </select>

     <input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
     <input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
 <div>   <!-- wrapper end -->

现在您可以在其父容器中找到 class 的下一个输入：

$(document).on('change', '.selectProduct', function(e) {
    var idSize = $(this).val();
    $(this).parent().find(".code").addClass(idSize); // <-- parent
})

在更改事件上添加 CSS class

add CSS class on change event

javascript

css

jquery

class

onchange