根据第一个输入在第二个输入中设置值

Question

我在Wordpress选项页面中有两个输入字段。我正在计算成本，然后在相应的输入字段中设置值，但它在所有第二个输入中进行设置。我希望仅在相应的输入字段中设置值。

JSFiddle

$('input[id^="calc_transport_"]').on('change', function() {
  var transport_margin_cost = getRandomNumber();
  $('input[id^="calc_m_transport_"]').val(transport_margin_cost.toFixed(2));
});

function getRandomNumber() {
  var number = 1 + Math.floor(Math.random() * 6);
  return number;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form-table">
  <tbody>
    <tr>
      <th scope="row">1 KG</th>
      <td>
        <input class="transport text" id="calc_transport_1" name="calc_transport_1" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_1" name="calc_m_transport_1" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">2 KG</th>
      <td>
        <input class="transport text" id="calc_transport_2" name="calc_transport_2" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_2" name="calc_m_transport_2" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">3 KG</th>
      <td>
        <input class="transport text" id="calc_transport_3" name="calc_transport_3" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_3" name="calc_m_transport_3" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">4 KG</th>
      <td>
        <input class="transport text" id="calc_transport_4" name="calc_transport_4" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_4" name="calc_m_transport_4" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">5 KG</th>
      <td>
        <input class="transport text" id="calc_transport_5" name="calc_transport_5" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_5" name="calc_m_transport_5" type="text" value="">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

问题是因为您选择了calc_m_transport_个ID的所有元素。

要解决此问题，您可以首先使用元素上的类来选择它们。在那里，您可以使用$(this).siblings()查找与用户输入的元素相关的.transport-margin元素。试试这个：

$('.transport').on('change', function() {
  var transport_margin_cost = getRandomNumber();
  $(this).siblings('.transport-margin').val(transport_margin_cost.toFixed(2));
});

function getRandomNumber() {
  var number = 1 + Math.floor(Math.random() * 6);
  return number;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form-table">
  <tbody>
    <tr>
      <th scope="row">1 KG</th>
      <td>
        <input class="transport text" id="calc_transport_1" name="calc_transport_1" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_1" name="calc_m_transport_1" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">2 KG</th>
      <td>
        <input class="transport text" id="calc_transport_2" name="calc_transport_2" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_2" name="calc_m_transport_2" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">3 KG</th>
      <td>
        <input class="transport text" id="calc_transport_3" name="calc_transport_3" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_3" name="calc_m_transport_3" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">4 KG</th>
      <td>
        <input class="transport text" id="calc_transport_4" name="calc_transport_4" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_4" name="calc_m_transport_4" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">5 KG</th>
      <td>
        <input class="transport text" id="calc_transport_5" name="calc_transport_5" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_5" name="calc_m_transport_5" type="text" value="">
      </td>
    </tr>
  </tbody>
</table>

Answer 2

使用next和this查找下一个输入。 next只看到dom上的下一个兄弟元素。

 $(this).next('input')

   $('input[id^="calc_transport_"]').on('change', function() {
   var transport_margin_cost = getRandomNumber();
   $(this).next('input').val(transport_margin_cost.toFixed(2));
});

function getRandomNumber() {
  var number = 1 + Math.floor(Math.random() * 6);
  return number;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form-table">
  <tbody>
    <tr>
      <th scope="row">1 KG</th>
      <td>
        <input class="transport text" id="calc_transport_1" name="calc_transport_1" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_1" name="calc_m_transport_1" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">2 KG</th>
      <td>
        <input class="transport text" id="calc_transport_2" name="calc_transport_2" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_2" name="calc_m_transport_2" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">3 KG</th>
      <td>
        <input class="transport text" id="calc_transport_3" name="calc_transport_3" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_3" name="calc_m_transport_3" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">4 KG</th>
      <td>
        <input class="transport text" id="calc_transport_4" name="calc_transport_4" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_4" name="calc_m_transport_4" type="text" value="">
      </td>
    </tr>
    <tr>
      <th scope="row">5 KG</th>
      <td>
        <input class="transport text" id="calc_transport_5" name="calc_transport_5" type="text" value="">
        <input class="transport-margin text" id="calc_m_transport_5" name="calc_m_transport_5" type="text" value="">
      </td>
    </tr>
  </tbody>
</table>