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>