Question

好的，我有5个输入。金额（下注），机会，乘数（支付），利润和滑块。

现在我的滑块更新了胜利％，这是我想要的。但是，当我使用滑块更新win％时，它不会更新其他输入。当我使用文本输入来更新win％时，它只更新其他输入。

见下面的代码：

Slider jQuery代码：

<script type="text/javascript">
var $chance_txt = $('#chance'),
$chance_slider = $('#chanceslider').on('change', function() {
    $chance_txt.val($chance_slider.val());
});
</script>

文本输入jQuery代码（不要质疑公式或任何数学，它们没问题）：

    <script>
    $(document).ready(function(){

        function updateValues() {
            // Grab all the value just incase they're needed.
            var chance = $('#chance').val();
            var bet = $('#bet').val();
            var pay = $('#pay').val();
            var profit = $('#profit').val();

            // Calculate the new payout.
            pay = (999/(parseFloat(chance)+0.45))*100/1000;


            // Calculate the new profit.
            profit = bet*pay-bet;
            profit = profit.toFixed(6);

            $('#chance').val(chance);
                            $('#bet').val(bet);
            $('#pay').val(pay);
            $('#profit').val(profit);
        }


        $('#chance').keyup(updateValues);
        $('#bet').keyup(updateValues);
        $('#pay').keyup(updateValues);
        $('#profit').keyup(updateValues);



    });
</script>

HTML代码：

<label for="bet">Bet Amount</label>
    <input type="text" name="bet" id="bet" class="text" placeholder="Amount">
</div>
<div class="form-box">
<label for="pay">Multiplier </label>
<input type="text" name="pay" id="pay" class="text" placeholder="Payout - 2X Default">
</div>
<div class="form-box last">
<label for="profit">Profit </label>
<input type="text" name="profit" id="profit" class="text" placeholder="Profit">
  </div><!-- End Box -->
 <div class="clearfix"></div>
<div class="form-box">
<label for="chance">Win Chance (%)</label><input type="text" name="chance" id="chance" class="text" value="50">
</div>

<p>Slide to choose win chance or enter it in the input!</p><br><input type="range" id="chanceslider" class="vHorizon" step="0.01" min="0.01" max="98" style="background-color: #00aec8; width: 50%;">
</div>

Answer 1

你试过这个：

$chance_slider = $('#chanceslider').on('change', function() {
    $chance_txt.val($chance_slider.val());
    updateValues();
});

要么将该代码移动到ready处理程序（最佳选项），要么将updateValues()声明移出ready处理程序，以便updateValues()在范围内

您说“不要质疑公式”，但您在updateValues()中确实有冗余代码 - 您将#pay和#profit的值检索到pay和profit变量，但不要使用它们，而是用公式中的值覆盖它们。此外，在计算利润后，您将#chance和#bet设置为已有的值。当用户输入的值被忽略时，#pay和#profit上的密钥处理程序似乎很奇怪 - 如果用户尝试键入的任何内容立即被计算值覆盖，为什么这些字段甚至已启用？

Answer 2

你还没有调用你的功能！

选中fiddle。

<强> JS：

var $chance_txt = $('#chance'),
    $chance_slider = $('#chanceslider').on('change', function () {
        $chance_txt.val($chance_slider.val());
        // Grab all the value just incase they're needed.
        var chance = $('#chance').val();
        var bet = $('#bet').val();
        var pay = $('#pay').val();
        var profit = $('#profit').val();

        // Calculate the new payout.
        pay = (999 / (parseFloat(chance) + 0.45)) * 100 / 1000;


        // Calculate the new profit.
        profit = bet * pay - bet;
        profit = profit.toFixed(6);

        $('#chance').val(chance);
        $('#bet').val(bet);
        $('#pay').val(pay);
        $('#profit').val(profit);
    });

如何通过jQuery更新文本输入？

2 个答案: