Question

<!--js-->

function changeValue(dropdown,source) {
    var option = dropdown.options[dropdown.selectedIndex].value;
    if (option == '1' && source==0) {
        var total = 20;
        $("span").text(total);
        $('.balance').attr({"min":0, "max":total}).on('input', function() {
            var value = parseInt(this.value);
            var otherInputs = $('.balance').not(this);
            var remainderDiv;
            var remainder, sum;
            if (isNaN(value)) {
                value = 0;
            } else if (value > total) {
                value = total;
            } else if (value < 0) {
             value = 0;
            }
            this.value = value;
            remainder = total - value;
            remainderDiv = remainder / otherInputs.length;
            sum = value;
            $.each(otherInputs, function(input) {
             sum += Number(otherInputs[input].value);
            });
            if (sum > total) {
             otherInputs.val(remainderDiv);
            }
        });
    }else if (option == '2' && source==0) {
        var total = 20;
        $("span").text(total);
        $('.balance').attr({"min":0, "max":total}).on('input', function() {
            var value = parseInt(this.value);
            var otherInputs = $('.balance').not(this);
            var remainderDiv;
            var remainder, sum;
            if (isNaN(value)) {
                value = 0;
            } else if (value > total) {
                value = total;
            } else if (value < 0) {
             value = 0;
            }
            this.value = value;
            remainder = total - value;
            remainderDiv = remainder / otherInputs.length;
            sum = value;
            $.each(otherInputs, function(input) {
                sum += Number(otherInputs[input].value);
            });
            if (sum > total) {
                otherInputs.val(remainderDiv);
            }
        });
    }
}   

<!--html-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="changeValue(this,0)">
    <option value="1">1-person</option>
    <option value="2">2-10 group</option>
</select>


<input type="number" class="balance">
<input type="number" class="balance">

<!--html-->

这就是我希望它保留选项和if语句的方式。我之所以这么想是因为这些字段是动态添加的。因此，如果您可以向现有代码添加一个函数，以便在我更改选项选项时更改该值。代码是完美的，我只需要我要求的东西。

Answer 1

首先，您的代码中存在一些不一致之处。

每次更改下拉列表的选择时，您都在设置输入事件。在jquery中这是不好的，因为它不会覆盖前一个事件，但它会向该元素添加一个事件。想象一下，将下拉列表更改100次。

首先，我所做的是在包含＆＃39; sex＆＃39;的每个元素上添加输入事件。作为$(document).ready函数中的类

$(document).ready(function(){
    $('.sex').on('input', function() {
        var option = $("#dropdown")[0].selectedIndex;
        //your other code for balancing the inputs
    });
 });

现在我要在你编写的changeValue()函数中做的只是设置输入元素的最小值和最大值，并平衡它们的除法，以便两者之和（将来可能超过两个））不会超过当前案件的总数。

function changeValue(dropdown,source) {
    if (source == 0){

        var caseNo = dropdown.selectedIndex;
        var minValue = 0, maxValue = 1;

        if(caseNo === 2)
            maxValue = 15;
        else if(caseNo === 3)
            maxValue = 25;

        $(".sex").attr({"min": minValue, "max": maxValue});

        $.each($(".sex"), function(){
            //your other code for balancing the inputs
        });
    }
}

我们知道最小值将始终为0，因为在任何情况下，任何男性和女性输入都可以为0。我们只关心最大值。所以我只是根据案例号找到所需的最大值，然后根据两者设置文本框的最小值和最大值。

现在这行代码

$.each($(".sex"), function(){
    //your other code for balancing the inputs
});

每当选择下拉列表时，它将用于平衡输入。

由于相同的代码将一遍又一遍地使用，所以我创建了一个名为balanceValues()

的函数

这是它的定义

function balanceValues(caseNo, elementId){
    var value = parseInt($("#" + elementId).val());
    var otherInputs = $(".sex").not($("#" + elementId));
    var remainderDiv;
    var remainder, sum;

    var total = 1;

    if(caseNo === 2)
        total = 15;
    else if(caseNo === 3)
        total = 25;

    if (isNaN(value)) {
        value = 0;
    } else if (value > total) {
        value = total;
    } else if (value < 0) {
        value = 0;
    }

    $("#" + elementId).val(value);

    remainder = total - value;
    remainderDiv = remainder / otherInputs.length;
    sum = value;
    $.each(otherInputs, function() {
        sum += Number($(this).val());
    });

    if (sum > total) {
        otherInputs.val(remainderDiv);
    }
  }

几乎所有的代码都和你的代码一样，但我让它可以重用。您只需要传递更改输入的caseNo和element id。对于选择更改事件，我们将为所有输入调用此函数。

所以现在$(document).ready函数将是这样的

 $(document).ready(function(){
    $('.sex').on('input', function() {
        var option = $("#dropdown")[0].selectedIndex;
        balanceValues(option, this.id);
    });
 });

在changeValue()函数中，我之前发表评论的代码行将是这样的。

$.each($(".sex"), function(){
    balanceValues(dropdown.selectedIndex, $(this).attr("id"));
});

我已经测试了我的代码并且工作正常。希望这能解决你的问题。

获取此代码以更新选择选项更改

1 个答案: