如果选择了数量，请更改innerHTML

Question

我已经编写了以下代码，当数量发生变化时，它会更改输出(innerHTML(。

add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_output_text' );

function qty_output_text() {
global $product;
if ( $product->is_type('variable') && is_product() ) {
?>
<script>
jQuery(document).ready(function($) {
var quantita_iniziale = $('[name=quantity]').val();
$( '[name=quantity]' ).change( function(){
var quantita_iniziale = $('[name=quantity]').val();
document.getElementById("test123").innerHTML= quantita_iniziale+"K = "+quantita_iniziale+" test";
});
</script>
<?php
}
}

如果我改变产品的数量，那么输出是正确的。

该产品有两种变体。如果我选择变体1，则最小数量设置为15。但是，我的脚本无法识别此更改，因此无法输出正确的数字。你知道我在这里能做什么吗？最小数量是否也应该更改[名称=数量]？

编辑：这是我的问题视频https://www.veed.io/view/e70ba12f-84e4-4a21-8966-bb1f332077ce

Answer 1

我认为您需要获得刚刚更改的元素的值。

您可以使用this来完成此操作。如果要在div中显示两个数量，则需要分别查询这两个元素并获取它们的每个值。

var quantita_iniziale = $('[name=quantity]').val();
$('[name=quantity]').change(function() {
var quantita_iniziale = $(this).val();
document.getElementById("test123").innerHTML = quantita_iniziale + "K = " + quantita_iniziale + " test";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="quantity">
<option> Change me </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
<select name="quantity">
<option> Change me </option>
<option value="1">1 </option>
<option value="2">2 </option>
</select>
<p id="test123">
</p>