Question

在我使用Html和jQuery构建的表单上发生了一件奇怪的事情。基本上我已经创建了一个愚蠢的函数，它从插入第一个输入的数量中减去一个百分比（我的平台费用），并将重新计算的一个放入第二个输入。当然，它恰好相反。

它类似于：

输入1：您提供什么
输入2：你收到的东西（减去我的平台费用）

正如您可以看到图像（或多或少），当我插入第一个输入 1000 时，如果我的百分比，第二个输入将填充 930 是7％。很直。

当我从第一个输入到第二个输入时按Tab键时会出现问题。第二个保留其值，但第一个进一步减损未定义的数量，我无法识别或阻止。我不知道为什么，我可能会错过一些非常愚蠢的东西，但我看不到它。

这是我的 html ：

<div class="row top-15 form-group">
    <div class="col-sm-6">
        <h4>
            <?php _e('Your bid','dev'); ?>
        </h4>
        <p>
            <?php _e("Insert project's budget",'dev'); echo $budget;?>
        </p>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
            <input type="number" name="mybid" id="bid" class="form-control" value="<?php echo $bid; ?>" placeholder="<?php _e(" How much you offer ", "dev ") ?>" data-alert="<?php _e('Please type in a bid value.','dev'); ?>" />
        </div>
    </div>
    <div class="col-sm-6">
        <h4>
            <?php _e("You will receive",'dev'); ?>
        </h4>
        <p>
            <?php printf(__("%s of fees", 'dev'), '-' . $Dev_fee_after_paid . '%') ?>
            <span id="fees" data-fees="<?php echo $Dev_fee_after_paid ?>"></span>
        </p>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
            <input type="number" name="total" id="total" class="form-control" value="" size="10" placeholder="<?php _e(" What you get ", "Dev ") ?>" />
        </div>
    </div>
</div>

我的jQuery

var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
    e.preventDefault();
    e.stopPropagation();
});
$("#bid").on('keyup', function(e){
    var newbid = $(this).val();
    var newfees = (newbid/100)*setFees;
    var total = newbid-newfees;
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(newbid) === false){
        $(this).addClass('error');
        return;
    }
    if(newbid > 0){
        $("#total").val(total.toFixed(0));
        $("#fees").text(' = ' + newfees.toFixed(0) + currency);
    } else {
        $("#total").val('');
    }
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(newbid);
    }
});
$("#total").on('keyup', function(e){
    var totalTwo = $("#total").val();
    var feesTwo = (totalTwo/100)*setFees;
    var bidTwo = (+feesTwo)+(+totalTwo);
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(bidTwo) === false){
        $(this).addClass('error');
        return;
    }
    if(totalTwo > 0){
        $("#bid").val(bidTwo.toFixed(0));  
        $("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
    } else {
        $("#bid").val('');
    }
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(totalTwo);
    }
});

正如您所见，我已preventDefault试图stopPropagation和keycode == 9但未成功。你能帮我指点一下吗？

Answer 1

你的数学错了。如果你的数学是正确的，那么如果你从另一个盒子中更新一个盒子就没关系，然后立即做相反的事情。

rightbox = leftbox * (1 - setfees / 100)

所以

leftbox = rightbox / (1 - setfees / 100)

Answer 2

当您将输入放入第一个框时，您将更新第二个框：

var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;

newbid:                 1000
newfees: (1000/100)*7 = 70
total:   1000-70      = 930

然后，当按下tab时，会在第二个框上触发keyup事件，然后更新第一个框：

var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);

totalTwo:              930
feesTwo: (930/100)*7 = 65
bidTwo:  65+930      = 995

您应该更改事件的触发方式，以及计算值的逻辑。

Answer 3

您正在检查是否是功能结束时的标签按下。试着把它放到顶部。

var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
    e.preventDefault();
    e.stopPropagation();
});
$("#bid").on('keyup', function(e){
        if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(newbid);
    }
    var newbid = $(this).val();
    var newfees = (newbid/100)*setFees;
    var total = newbid-newfees;
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(newbid) === false){
        $(this).addClass('error');
        return;
    }
    if(newbid > 0){
        $("#total").val(total.toFixed(0));
        $("#fees").text(' = ' + newfees.toFixed(0) + currency);
    } else {
        $("#total").val('');
    }
});
$("#total").on('keyup', function(e){
    var totalTwo = $("#total").val();
    var feesTwo = (totalTwo/100)*setFees;
    var bidTwo = (+feesTwo)+(+totalTwo);
    if(e.keyCode == 9) { //fixing the typed value in case of tab press
       e.preventDefault();
       e.stopPropagation();
       $(this).val(totalTwo);
    }
    if($(this).hasClass('error')){
        $(this).removeClass('error');
    }
    if($.isNumeric(bidTwo) === false){
        $(this).addClass('error');
        return;
    }
    if(totalTwo > 0){
        $("#bid").val(bidTwo.toFixed(0));  
        $("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
    } else {
        $("#bid").val('');
    }

});

Html Form / jQuery：使用tab更改输入会减少数值

3 个答案: