javascript - jQuery - 选择下一个输入/通过更改选择值进行选择

Question

我花了几个小时试图解决这个问题。我的代码

 <div class="conditions_wrapper">   
    <div class="ui grid condition"> <!-- first -->
      <div class="four wide column">
       <select class="select_column"><option> .... </options></select>
      </div>

      <div class="four wide column">
        <select class="select_relation"><option> .... </options></select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>

    <div class="ui grid condition"> <!-- second -->
      <div class="four wide column">
       <select class="select_column"><option> .... </options></select>
      </div>

      <div class="four wide column">
        <select class="select_relation"><option> .... </options></select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>    
      .
      .
      more clone of outer div . . .
 </div>

想要的是，当我更改第一个 select[class=select_column] 时，它应该更新第二个 select[class=select_relation] 和最后一个输入字段的占位符.

jQuery('#conditions_wrapper').on('change','.select_column', function (e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value;

if(valueSelected == "value_of_first_select"){    
  jQuery(this).closest(".column").next().first() > $(".select_relation").html('<option> . . . </option>');

  jQuery(this).closest(".column").next().first() > $(".condition_value").prop("placeholder","enter email");

} 

else {

jQuery(this).closest(".column").next().first() > $(".select_relation").html('<option> . . .</option>');

 jQuery(this).closest(".column").next().first() > $(".condition_value").prop("placeholder","enter name");
      }

});

如果我只有一个条件，代码工作正常，但如果有多个条件，第一个选择的更改会影响所有第二个选择和所有输入。

我如何才能仅定位下一个选择和下一个输入？

Answer 1

所以我在这里注意到的第一件事是，在你的 html 代码上你有 <div class="conditions_wrapper">在您的 jQuery 上您选择 ID jQuery('#conditions_wrapper') .

这就是我的想法。您可能想要重构它，但它可以完成工作。

$('.conditions_wrapper .column').on('change','.select_column', function (e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value;


  // The this keyword here is selecting the "select" input
  // We can then select the parent which is the .comlumn
  // Get the next element which is the .column right after
  // And then get the child element which in this case it is the .select_relation
  $(this).parent().next().children().addClass('red');

	// The this keyword here is selecting the "select" input
  // We can then select the parent which is the .comlumn
  // Get the next element twice which is the second .column element from the select item
  // And then get the child element which in this case it is the .condition_value
  $(this).parent().next().next().children().prop("placeholder","enter email").addClass('red');

});

select, input {
  margin: 5px 0;
}

.red {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conditions_wrapper">
    <div class="ui grid condition"> <!-- first -->
    
      <div class="four wide column">
       <select class="select_column">
         <option vlaue="0"> .... </option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
       </select>
      </div>

      <div class="four wide column">
        <select class="select_relation">
          <option> .... </option>
        </select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>

    <div class="ui grid condition"> <!-- second -->
      <div class="four wide column">
       <select class="select_column">
       <option vlaue="0"> .... </option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
       </select>
      </div>

      <div class="four wide column">
        <select class="select_relation"><option> .... </option></select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>
 </div>