woocommerceにおけるインクリメントバリューフィールドの問題

Question

/woocommerce/templates/global/quantity-input.phpにあるwebsite（WordpressとWooCommerceでビルド）の次のコードを使用して、いくつかの「インクリメント値」ボタンを追加するコードを追加しました。各ボタンは、その横にあるフィールドの量の値を1つ増やすことになっています。

問題は、すべてのボタンが最初のトップフィールド値のみを増加させることです。

各ボタンは、他のフィールドには反映されず、隣にあるフィールドとのみ対話したいと考えています。

私は間違っていますか？
私を助けてください。

echo "<script> 
 

 
var i = 0; 
 
    function buttonClick() { 
 
     document.getElementById('inc').value = ++i; 
 
</script>"; 
 

 

 

 

 
if (! defined('ABSPATH')) { 
 
\t exit; // Exit if accessed directly 
 
} 
 
?> 
 
<div class="quantity"> 
 
<form> 
 
\t <input type="number" id="inc" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr($step); ?>" min="<?php echo esc_attr($min_value); ?>" max="<?php echo esc_attr($max_value); ?>" name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php echo esc_attr_x('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick()" value="Increment Value" /> 
 
\t </form> 
 
</div>

Answer 1

のdocument.getElementById（ 'INC'）が呼び出されると、それはID "INC" の最初の入力を取得します。したがって、その入力フィールドが更新されます。入力フィールドには一意のIDが必要です。または、更新する正しい入力フィールドを見つける別の方法を見つけることができます。

echo "<script> 

var i = 0; 
    function buttonClick(id) { 
     document.getElementById(id).value = ++i; 
</script>"; 




if (! defined('ABSPATH')) { 
    exit; // Exit if accessed directly 
} 
?> 
<div class="quantity"> 
<form> 
    <input type="number" id="inc1" onfocus="if(this.value == '0') { this.value = ''; }" step="<?php echo esc_attr($step); ?>" min="<?php echo esc_attr($min_value); ?>" max="<?php echo esc_attr($max_value); ?>" name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php echo esc_attr_x('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 
    <input type="button" onclick="buttonClick("inc1")" value="Increment Value" /> 
    </form> 
</div> 

Answer 2

あなたはこれが動作している、それを試してみてください

...関数を呼び出すとid機能で渡された入力の値をインクリメントしながら、入力のIDを渡し、このようなものが必要... 。

function buttonClick(id) 
 
{ 
 
\t var val = document.getElementById(id).value; 
 
\t document.getElementById(id).value = ++val; 
 
}

<div class="quantity"> 
 
<form> 
 
\t <input type="number" id="inc_1" onfocus="if(this.value == '0') { this.value = ''; }" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick('inc_1')" value="Increment Value" /> 
 
\t 
 
\t <input type="number" id="inc_2" onfocus="if(this.value == '0') { this.value = ''; }" class="input-text qty text" size="4" /> 
 
\t <input type="button" onclick="buttonClick('inc_2')" value="Increment Value" /> 
 

 
</form> 
 
</div>