Question

现在在下面的代码中，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();
})

感谢我尽我所能学习编程

Answer 1

＆＃13;

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();
})

＆＃13;

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

＆＃13;

使用this关键字获取当前对象。请检查解决方案，希望这是您所需要的

Answer 2

问题是绑定到add()函数中的change事件。您已经捕获了更改事件，因此当add()运行时，它会添加另一个更改处理程序，在下一个更改事件触发之前不会被触发。

解决方案是将所选值作为参数传递给add()。

我还希望以后能够在代码中使用该更新的变量

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

＆＃13;

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);
})

＆＃13;

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

＆＃13;

在事件之后更改变量的值

2 个答案: