个人中心
gpt4 book ai didi

javascript - 我添加了三个输入数字的最大值并且它有效但是如何在不丢失最大值的情况下添加递增递减按钮？

转载 作者：行者123 更新时间：2023-12-04 03:37:11 25 4
gpt4 key购买 nike

我需要加一个三元是8，用点击+和-按钮。但是，我不希望它会将每个元素增加到 8 个。

// Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together
var max = 8;
var $inputs = $('input');

function sumInputs($inputs) {
    var sum = 0;

    $inputs.each(function() {
        sum += parseInt($(this).val(), 0);
    });

    return sum;
}

$inputs.on('input', function(e) {
    var $this = $(this);
    var sum = sumInputs($inputs.not(function(i, el) {
        return el === e.target;
    }));
    var value = parseInt($this.val(), 10) || 0;
    if (sum + value > max) $this.val(max - sum);
});


//Increment Decrement value

function up(max) {
    document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;

    if (document.getElementById("myNumber").value >= parseInt(max)) {
        document.getElementById("myNumber").value = max;

    }
}

function down(min) {
    document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1;
    if (document.getElementById("myNumber").value <= parseInt(min)) {
        document.getElementById("myNumber").value = min;
    }
}


function up2(max) {
    document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1;
    if (document.getElementById("myNumber2").value >= parseInt(max)) {
        document.getElementById("myNumber2").value = max;
    }
}

function down2(min) {
    document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1;
    if (document.getElementById("myNumber2").value <= parseInt(min)) {
        document.getElementById("myNumber2").value = min;
    }
}


function up3(max) {
    document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1;
    if (document.getElementById("myNumber3").value >= parseInt(max)) {
        document.getElementById("myNumber3").value = max;
    }
}

function down3(min) {
    document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1;
    if (document.getElementById("myNumber3").value <= parseInt(min)) {
        document.getElementById("myNumber3").value = min;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select-1">
    <button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button>
    <input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/>
    <button type="submit" value="+" onclick="up('8')" class="add">+</button>
</div>
<div class="select-2">
    <button type="submit" value="-" onclick=" down2('0')" class="sub">-</button>
    <input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/>
    <button type="submit" value="+" onclick="up2('8')" class="add">+</button>
</div>
<div class="select-3">
    <button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button>
    <input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/>
    <button type="submit" value="+" onclick="up3('8')" class="add">+</button>
</div>

目前，最大值是 8。我也想通过 + 和 - 按钮获得最大值。

如何使用 javascript 或 jquery 解决这个问题？

在这里，我在下面有一个链接用于递增和递减。 https://stackoverflow.com/a/49645518/15412266

最佳答案 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>
        

        <button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
        <input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>

        <button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
        <input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>


        <button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
        <input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
        <button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>


    </div>

    <script type="text/javascript">
        function inputNumber(el)
        {
            
            var myElements = document.getElementsByClassName('numbers');
            var sum = 0;
            for (var i=0;i<myElements.length;i++) {
                if(myElements[i].value)
                    sum = sum+parseInt(myElements[i].value);
            }
            if(sum<=8)
            {
                el.dataset.prevvalue  = el.value;
            } else {
                el.value  = el.dataset.prevvalue;
            }

        }

        function minusoperation(inputNumber)
        {

            var el = document.getElementById('number'+inputNumber);
            if(parseInt(el.value))
            {
                el.value = parseInt(el.value)-1;

            } else {
                el.value = 0;
            }
            el.onchange();
        }

        function plusoperation(inputNumber)
        {
            var el = document.getElementById('number'+inputNumber);

            if(parseInt(el.value))
            {
                el.value = parseInt(el.value)+1;
            } else {
                el.value = 1;
            }
            el.onchange();

        }

    </script>
</body>
</html>

关于javascript - 我添加了三个输入数字的最大值并且它有效但是如何在不丢失最大值的情况下添加递增递减按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66667551/

25 4 0
文章推荐： javascript - 在 JavaScript 中选择匹配的动态字段
文章推荐： html - 为什么 div margin 不计算直接父级
文章推荐： sql - 如何在聚合和非聚合数据集上获得相同的 AVG() 值
文章推荐： rust - 编译器无法推断 `impl ` 的对象是否在 Rust 中实现了另一个特征
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com