Question

单击相同的元素时，我需要交替调用两个函数，在该元素中，我需要调用一个带参数的函数，而另一个不带参数的函数。基本上，我需要在第一次单击时选择元素，然后在第二次单击时取消选择。我的JS代码：

    var list = document.getElementById("sectionDispName");

            for (var i = 0; i < secArr.length ; i++) {
                list.innerHTML += '<li onclick="func(this)"    ondblclick="dblclickadd(this)"> ' + secArr[i][0] + '</li> ';

            } 
var func = (function (val) {

       var first = true;
       return function (val) { // argument moved to here.

           first ? getValue(val) : singleclick();
           first = !first;
        }
   })();

getValue（val）函数用于选择元素，而singleclick（）用于取消选择。

Answer 1

我不确定这是否是您要寻找的东西，但是这样的事情对我来说很有意义，并且简单一些：

var list = document.getElementById("sectionDispName");

var selected = [];
for (var i = 0; i < secArr.length ; i++) {
    selected.push(false);
    list.innerHTML +=
        '<li onclick="toggleSelected(' + i + ')" ondblclick="dblclickadd(this)">' +
        secArr[i][0] + '</li>';
}

var toggleSelected = function(i) {
    selected[i] = !selected[i];
};

Answer 2

调用函数时，除其他外，“变量该呼叫的“环境”已创建 “绑定对象”。（简称为“变量对象”；说 “可变环境的绑定对象”只是一点点 -！）变量对象具有以下参数的属性：函数，函数中声明的所有局部变量以及所有在函数中声明的函数仅在内部有效功能。

这意味着您使用

 var func = (function (val) {

    var first = true;
    /* Code */
 }

也就是所谓的变量范围。

变量仅存在于其包含的函数/方法/类中，并且这些变量将覆盖属于更大范围的任何变量。

var first仅在函数被销毁后才被销毁时才被存储。那么您需要一个全局变量来存储该数据：

var first = true;
var func = (function (val) {
/* Code */
}

或

var first = [];
var func = (function (val) {
first.push(true);
/* Code */
}

Answer 3

我不确定您的方法，因为有更好的方法。但是，您仍然对这里的行为有误解。你写了

var func = (function (val) {
    var first = true;
    return function () {
        first ? getValue(val) :singleclick();
        first = !first;
    }
})();

是IIFE。但是，func保留了您返回的功能。 return function () {...}。该函数不需要参数。但是，您尝试使用参数调用该函数。

如果要传递参数，请将参数从IIFE初始化程序移至返回的函数对象。因此，请执行return function (val) {...}。在这种情况下，func现在是带有一个参数的函数对象。

以下是一个交互式示例。我已经为PoC调整了一些值。只需单击列表元素。

var func = (function() {
  var first = true;
  return function(val) { // argument moved to here.
    console.log('first? ' + first);
    first ? getValue(val) : singleclick();
    first = !first;
  }
})();

function getValue(val){
  console.log('getValue called with ' + val);
}
function singleclick(){
  console.log('singleclick called');
}

<ul>
  <li onclick="func(1)">list 1</li>
  <li onclick="func(2)">list 2</li>
  <li onclick="func(3)">list 3</li>
  <li onclick="func(4)">list 4</li>
  <ul>

Answer 4

您没有将val传递给返回的函数。

var func = (function (val) {
    var first = true;
    return function (val) {
        first = !first;
        first ? getValue(val) : singleclick();
    }
})();
window.onload = function () {
    var list = document.getElementById("sectionDispName");

    for (var i = 0; i < secArr.length; i++) {
        list.innerHTML += '<li onclick="func(this)"  ondblclick="dblclickadd(this)"> ' + secArr[i][0] +
            '</li> ';
    }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        var secArr = [
            ['element_0_0'],
            ['element_1_0'],
            ['element_2_0'],
            ['element_3_0']
        ];

        function getValue(HTMLelement) {
            console.log('getValue',
                HTMLelement);
        }

        function singleclick() {
            console.log('singleclick');
        }
    </script>
    </head>

<body>
    <ol id="sectionDispName"></ol>
</body>

</html>

单击同一元素时，交替调用两个函数

4 个答案: