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

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>