獲取此代碼更新選擇選項更改

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次。

所以首先我所做的是含有「性」作爲類中的每個元素在$(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。我們只關心最大值。所以我只需根據case no找到所需的最大值，然後根據兩者設置文本框的最小值和最大值。

現在這行代碼

$.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和輸入改變的元素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")); 
}); 

我測試了代碼在我的結尾，它的工作正常。希望這能解決你的問題。