在事件发生后更改变量的值

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>