woocommerce递增值字段问题
问题描述:
在我们的website(使用Wordpress和WooCommerce构建)位于/woocommerce/templates/global/quantity-input.php
文件中的以下代码中,我添加了一些代码以获得多个“增量值”按钮。每个按钮都应该将位于其旁边的字段的数量值增加1。woocommerce递增值字段问题
问题是,所有按钮只增加第一个顶部字段值。
我希望每个按钮仅与位于其旁边的字段进行交互,而不反映其他字段。
我在做什么错了?
请帮帮我。
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>
答
当的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>
答
你需要像这样,通过将输入的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>
这是一个很好的解决方案...做得好 – LoicTheAztec
谢谢亲爱@LoicTheAztec –