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

【问题标题】：Changing the value of a variable after an event在事件发生后更改变量的值
【发布时间】：2015-02-11 07:06:14
【问题描述】：

现在在下面的代码中，var selected 没有改变（我猜它输出的是空字符串）。我需要您帮助我更改选定的变量，以便该值始终是选定的选项（在 select 元素中）。我还希望以后能够在 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();
})

感谢我努力学习编程

【问题讨论】：

add 方法会触发吗？
当我更改选项时，我不知道我得到的只是一个空白警告框。

标签： javascript variables object scope onchange

【解决方案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 关键字获取当前对象。请检查解决方案，希望这是您所需要的

【讨论】：

【解决方案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>

【讨论】：