在事件發生後更改變量的值

Question

現在在下面的代碼中，var selected不會改變（它會輸出我猜的空字符串）。我需要您幫助我更改所選變量，以便該值始終應該是選定選項（在選擇元素中）。我還希望能夠在isSelected函數之外的代碼中稍後使用該更新的變量。

var isSelected = (function(){ 
    var selected = ""; 

    return { 
     add : function(){ 
      $("select").on("change", function(){ 
       selected = $(this).val() 
      }) 
     }, 
     output : function(){ 
      alert(selected) 
     } 
    } 
})() 

$("select").on("change", function(){ 
    isSelected.add(); 
    isSelected.output(); 
}) 

感謝我嘗試我最好的學習編程

Answer 1

var isSelected = (function(){ 
 
    var selected = ""; 
 

 
    return { 
 
     add : function(el){ 
 
      selected = $(el).val(); 
 
      
 
     }, 
 
     output : function(){ 
 
      alert(selected) 
 
     } 
 
    } 
 
})() 
 

 
$("select").on("change", function(e){ 
 
    e.preventDefault() 
 
    isSelected.add(this); 
 
    isSelected.output(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
<option value="">Select combo</option> 
 
<option value="Value1">Text1</option> 
 
<option value="Value2">Text2</option> 
 
<option value="Value3">Text3</option> 
 
</select>

使用this關鍵字獲取當前對象。請檢查解決方案，希望這是你所需要的

Answer 2

該問題綁定到add()函數中的更改事件。您已經捕獲了更改事件，因此當add()運行時，它會添加另一個更改處理程序，直到下一個更改事件觸發時纔會觸發它。

解決方法是將所選值傳遞給add()作爲參數。

我也希望以後能夠使用更新的變量在代碼

只需添加其他功能，像getSelected()其返回值。

var isSelected = (function(){ 
 
    var selected = ""; 
 

 
    return { 
 
     add : function(value){ 
 
      selected = value; 
 
     }, 
 
     output : function(){ 
 
      alert(selected); 
 
     }, 
 
     getSelected : function(){ 
 
      return selected; 
 
     } 
 
    } 
 
})(); 
 

 
$("select").on("change", function(){ 
 
    isSelected.add(this.value); 
 
    isSelected.output(); 
 
    
 
    var selected = isSelected.getSelected(); 
 
    console.log(selected); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    <option>Three</option> 
 
</select>