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 step金额。

关于.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>

单击按钮更改输入数字

1 个答案: