php - 单击按钮逐步更改输入数字

Question

我的 functions.php 文件中有以下代码，但是该脚本似乎没有执行其预期的操作。

我的加号和减号按钮分别具有类 .plus 和我的 .minus 。

PHP/JQuery:

/*
    ========================================
    Change qty by step on button click
    ========================================
*/
function kia_add_script_to_footer(){ ?>

    <script>

    jQuery(document).ready(function(){

        jQuery(document).on('click', '.plus', function(e) { // replace '.quantity' with document (without single quote)

            $input = jQuery(this).siblings('.quantity .qty');

            var val = parseInt($input.val());
            var step = $input.attr('step');

            step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;

            $input.val( val + step ).change();
        });
        jQuery(document).on('click', '.minus',  // replace '.quantity' with document (without single quote)

            function(e) {

            $input = jQuery(this).siblings('.quantity .qty');

            var val = parseInt($input.val());
            var step = $input.attr('step');

            step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;

            if (val > 0) {
                $input.val( val - step ).change();
            };
        });

     });

    </script>

<?php };

add_action( 'wp_footer', 'kia_add_script_to_footer' );

任何帮助将不胜感激!

编辑:对这个平淡的问题表示歉意。我删除了 input.qty 的通用输入箭头，并添加了两个按钮(.minus 和 .plus)。实际情况是，单击 .minus 或 .plus 时，input.qty 数字应减少或增加 var 步骤 金额。

至于.qty是否嵌套在.quantity内部，这是正确的。我不确定 .qty 是否在其他地方使用，因此为了确认我的编码是否正确，我添加了父元素的类。

HTML:

<div class="quantity">
        <input class="minus" value="-" type="button">
        <input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
        <input class="plus" value="+" type="button">
        <span>press - or + to add/remove meterage per half meter</span>
</div>

Answer 1

您需要使用parseFloat()而不是parseInt()

注意:我已经改变了

step = 'undefined' !== typeof(step) ? parseInt(step) : 0.5;

到

step = step != null ? parseFloat(step) : 0.5;

仅在“加号函数”中显示如何检查该值的另一​​种方式。

jQuery(document).ready(function(){

jQuery(document).on('click', '.plus', function(e) {

    $input = jQuery(this).siblings('.quantity .qty');

    var val = parseFloat($input.val());
    var step = $input.attr('step');

    step = step != null ? parseFloat(step) : 0.5;

    $input.val( val + step );
});

jQuery(document).on('click', '.minus',  // replace '.quantity' with document (without single quote)

    function(e) {

    $input = jQuery(this).siblings('.quantity .qty');

    var val = parseFloat($input.val());
    var step = $input.attr('step');

    step = 'undefined' !== typeof(step) ? parseFloat(step) : 0.5;

    if (val > 0) {
        $input.val( val - step ).change();
    };
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="quantity">
        <input class="minus" value="-" type="button">
        <input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
        <input class="plus" value="+" type="button">
        <span>press - or + to add/remove meterage per half meter</span>
</div>

这里也是一样，代码更少，并且始终保留一位小数请参阅评论。

var round = function (value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}

jQuery(document).on('click', '.plus, .minus', function(e) {
    var $input = jQuery(this).siblings('.quantity .qty');

    var val  = parseFloat($input.val());
    var step = parseFloat($input.attr('step'));

    step = step == null ? 0.5 : step;

    var sum = val + step;

    if($(this).hasClass('minus')) {
        sum = val - step;
    }
    
    $input.val(sum.toFixed(1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="quantity">
        <input class="minus" value="-" type="button">
        <input class="input-text qty text" step="0.5" min="0.5" max="10" name="quantity" value="0" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
        <input class="plus" value="+" type="button">
        <span>press - or + to add/remove meterage per half meter</span>
</div>