Question

使用位于文件/woocommerce/templates/global/quantity-input.php的{{3}}（使用Wordpress和WooCommerce构建）中的以下代码，我添加了一些代码，以便有几个“增量值”按钮。每个按钮应该将数量值增加1旁边的字段。

问题是所有按钮仅增加第一个顶部字段值。

我希望每个按钮只与位于其旁边的字段进行交互，而不反映其他字段。

我做错了什么？
请帮帮我。

echo "<script>

var i = 0;
    function buttonClick() {
        document.getElementById('inc').value = ++i;
</script>";




if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>
<div class="quantity">
<form>
	<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" />
	<input type="button" onclick="buttonClick()" value="Increment Value" />
	</form>
</div>

Answer 1

当调用document.getElementById（＆＃39; inc＆＃39;）时，它会获得id为＃34; inc＆＃34;的第一个输入。所以它更新了输入字段。您需要输入字段的唯一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的输入的值...

这是有效的，试试吧....

＆＃13;

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

＆＃13;

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

＆＃13;

在woocommerce中增加价值领域问题

2 个答案: