Question

如果有人能帮我解决这个问题，我将非常感激。

我有以下输入：

 <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-control cart-quantity" min="1" value="1"/>

如果输入值增加到3或更多，我想在div下面显示一条消息？

项目背景：客户将向购物车添加商品，如果商品达到3，则会收到免费商品

这可能吗？

提前谢谢！

Answer 1

在html div下面添加input：

<div id="free-prod"><p>You have a free product</p></div>

在CSS中：

#free-prod {
    display:none
}

在UpdateItemQuantity函数中，只需添加以下代码：

if(this.value >2) {
     $('#free-prod').show();
}
else{
    $('#free-prod').hide();
}

<强> 编辑：

如果您可以编辑UpdateItemQuantity功能（如评论中所述）。您可以向元素添加事件列表器。我建议您为id元素提供一些input并执行

if($('#your_input_id').val() > 2 ) {
     $('#free-prod').show();
}
$('#your_input_id').on('change',function(){
    if($(this).val() > 2 ) {
        $('#free-prod').show();
    }
    else{
        $('#free-prod').hide();
    }
})

演示 https://jsfiddle.net/w8vwsx81/

Answer 2

这个演示展示了这个概念的作用（以及如何）。

$(function() {
    $('.quantity').on('input', function() {
        var states = ['hide','show'],    //possible states of the freebie div
            i = +this.value > 2 ? 1 : 0; //determine index of the states array
        $('.freebie')[states[i]]();      //example $('.freebie')['hide']() is equiv to $('.freebie').hide()
    })
    .trigger('input');
    //when using buttons to increment and decrement
    $('.increase,.decrease').on('click', function() {
        var diff = $(this).is('.increase') ? 1 : -1; //determin whether to decrement or increment
        $('.quantity').val(function() {
            return +this.value + diff; //decrement or increment
        });
        $('.quantity').trigger('input'); //manually trigger the 'input' event or whatever event triggers the freebies div to show
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="decrease">-</button>
<input type="number" class="quantity" value="0">	
<button type="button" class="increase">+</button>
<div class="freebie">
    <img src="http://momsneedtoknow.com/wp-content/uploads/2009/01/freebies.gif" />
</div>

使用jQuery根据数字输入数量显示/隐藏div

2 个答案: