woocommerce遞增值字段問題

Question

在我們的website（使用Wordpress和WooCommerce構建）位於/woocommerce/templates/global/quantity-input.php文件中的以下代碼中，我添加了一些代碼以獲得多個「增量值」按鈕。每個按鈕都應該將位於其旁邊的字段的數量值增加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（ '增量'）被調用時，它得到ID爲 「公司」 第一輸入。所以它更新了輸入字段。您需要輸入字段的唯一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>