在更改事件上添加 CSS 类

Question

我有两个具有相同类的选择框。我正在尝试在更改选择选项时添加一个类。

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 获取输入并添加类。

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

如果选择框有多个选项，用户只能更改值，如果我们将相关输入组合在一起，更容易找到正确的.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

1. 我建议将 select + 输入包装到另一个 div 中，以便于查找。

2. 您的代码可能不起作用，因为您的元素具有非唯一的 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 -->
   

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

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