Jquery兄弟姐妹在警报中显示未定义

Question

Jquery 兄弟显示未定义 当用户在总金额字段中输入任何内容时，我有数量字段和总金额字段，然后我必须在警报中显示数量。我暂时不在乎数量，因为我必须了解为什么我的 jquery 兄弟姐妹不起作用。当我输入任何数字时，我会在警报中变得未定义。

这不是我的整个项目，这是我必须了解兄弟姐妹的项目的一部分。我将代码上传到以下链接。

例如，我有数量和总价。如果我使用 var qty_number=$("#number1").val(); 那么它将适用于唯一的单个字段。现在我添加了更多按钮 如果任何用户单击添加更多，那么它将显示数量 + 总价 + 删除按钮。用户最多可以添加 10 个字段。现在，当用户在总价中输入任何内容时，我必须显示该行的数量。

如果我的 div 不在父级之外，那么我必须使用什么方法？

你能帮我解决这个问题吗？

https://jsfiddle.net/Narendra2015/pu6qy4zr/19/

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;
}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}
$(".custom").on('keyup', 'input[id^=total_p_price]', function() {

  var that = $(this); // CHANGE HERE
  var total_p_price = that.val();
  var qty_number = that.siblings("input[id^=number]").val();
  alert(qty_number);
  console.log(qty_number);
});

<div class="custom">
  <div class="plus_minus">
    <span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
    <span class="value_button increase" onclick="increaseValue(1)" value="Increase Value">+</span>
  </div>
  <input type="text" class="form_control" name="total_p_price[]" id="total_p_price" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

数量输入与总输入不在同一个div中（它们没有相同的父（容器），所以就像它们不是兄弟姐妹一样，如果将两个输入放在同一个div中，数量将显示在警报。 这里是代码：

<div class="custom">
    <div class="plus_minus">
        <span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
        <input type="number" id="number1" class="qty_number form_control"  name="qty_number[]" value="0" class="form_control"/>
        <span class="value_button increase"  onclick="increaseValue(1)" value="Increase Value">+</span>

<input type="text" class="form_control" name="total_p_price[]" id="total_p_price" />
 </div>
</div>

这里是了解 jquery 兄弟的链接：https://api.jquery.com/siblings/

Answer 2

确认我的评论： 使用 id 获取显示数量值：

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;
}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}
$(".custom").on('keyup', 'input[id^=total_p_price]', function() {

  var that = $(this); // CHANGE HERE
  var total_p_price = that.val();
  var qty_number=$("#number1").val();
  alert(qty_number);
  console.log(qty_number);
});

<div class="custom">
  <div class="plus_minus">
    <span class="value_button decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control" name="qty_number[]" value="0" class="form_control" />
    <span class="value_button increase" onclick="increaseValue(1)" value="Increase Value">+</span>
  </div>
  <input type="text" class="form_control" name="total_p_price[]" id="total_p_price" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>