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

Question

现在在下面的代码中 var selected 没有改变（我猜它输出的是空字符串）。我需要你帮我更改 selected 变量，使值始终为 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();
})

感谢我正在努力学习编程

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()。

I also want to be able to use that updated variable later in the code

只需添加另一个函数，例如 getSelected() 值 returns。

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>

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

Changing the value of a variable after an event

javascript

variables

scope

onchange

object