Question

我在如何将变量作为函数调用时遇到麻烦。我已经对其进行了研究，但似乎不适用于我的代码。知道我的代码有什么问题吗？谢谢。

首先HTML

<a class="showhide" id="SampleID"><i class="fa fa-chevron-up"></i></a>

然后script

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    var id = $(this).attr("id").toString();
    //console.log("ShowHide: " + id);

    setTimeout(function () {
        var fn = window[id];
        fn();
    },200);
});

function SampleID() {
    alert("111");
}

但显示

未捕获的TypeError：fn不是函数

注意：：我尝试使用eval（）及其工作方式。但是我读到，使用eval()不好，这就是为什么我试图找到替代方法的原因。

Answer 1

对我有用

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    
    var id = $(this).attr("id").toString();
    
    setTimeout(function () {
        var fn = window[id];
        
        fn();
    }, 200);
});

function SampleID() {
    alert("111");
}

.showhide {
  height: 100px;
  width: 100px;
  background-color: #444444;
  border: 5px solid pink;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="showhide" id="SampleID"><i class="fa fa-chevron-up"></i></div>

Answer 2

这似乎很好用吗？

// Function for collapse hpanel
$('.showhide').on('click', function (event) {
    event.preventDefault();
    var id = $(this).attr("id").toString();
    //console.log("ShowHide: " + id);

    setTimeout(function () {
        var fn = window[id];
        fn();
    },200);
});

function SampleID() {
    alert("111");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showhide" id="SampleID"><i class="fa fa-chevron-up">TEST</i></a>

我建议使用data-方法在DOM中定义JavaScript信息：

var showHideFunctions = [{
  id: "sample-id",
  func: function() {
    console.log("Sample function fired");
  }
}];

function showHideClick(event) {
  event.preventDefault();
  var id = event.target.getAttribute("data-function-id");
  console.log("ShowHide: " + id);
  setTimeout(function() {
    showHideFunctions.find(function(entry) {
      return id == entry.id;
    }).func();
  }, 200);
}
document.querySelectorAll(".showhide")
  .forEach(function(elm) {
    elm.addEventListener("click", showHideClick);
  });

<p class="showhide" data-function-id="sample-id">Test</p>

在JavaScript中将变量作为function（）调用

2 个答案: