使用元素数据集作为变量来动态调用函数

Question

在Javascript中，我有一个对象，可以在字符串值和类似函数之间创建1：1映射。

var game_modules = {
  battleship: battleships_module,
  chess: chess_module
}

其中battleships_module和chess_module是设置与特定游戏关联的事件侦听器和操作的单个函数。例如。。。

var battleships_module = function(){
   var game_container = document.getElementById("battle-ships-game-container");
   //Rest of game functionality here
}

根据用户点击玩的游戏，每个"点击游戏"按钮都是一个标记，其中包含其模块名称作为 data-* 属性。例如

<div id="battle-ships-button" class="play-game-button" data-game_module="battleship">   </div>

我正在尝试在 javascript 中检索数据game_module以获取其值，并通过在"单击"上注册事件侦听器来动态调用我们之前定义的 game_modules 对象中的关联模块，如下所示：

some_element.onclick = function(e) { //e is click event
  var clicked_element = e.target //clicked element
  var current_module = clicked_element.dataset.game_module //supposed to retrieve the clicked element's data-game_module tag
game_modules[current_module](); //supposed to run the associated function defined in game_modules

}

但这行不通。它仅在我定义字符串文字时有效，例如...

var current_module = 'battleship';
game_modules[current_module](); //this works 

我想知道是否有人知道为什么数据集被区别对待。提前感谢！

Answer 1

同时，

您更正了数据属性(战舰(和对象文字(没有分号，但逗号(中的拼写错误，但要重复：

• 确保 data 属性的拼写与 game_modules 对象的键完全相同
• 检查控制台是否存在语法和运行时错误。

但也要确保您：

• 在对象game_modules中引用函数变量之前，先初始化函数变量battleships_module并chess_module;因此顺序应该与你在问题中发布的内容相反。

• 将事件侦听器绑定到具有 data 属性的 HTML 元素。或者，如果将其绑定到父级，请确保使用 currentTarget(假设具有 data 属性的元素没有可以捕获单击事件的子元素(。

这是一个简短的演示：

var battleships_module = function(){
        console.log('battleships module chosen');
    },    
    chess_module = function(){
        console.log('chess module chosen');
    }    
var game_modules = {
    battleship: battleships_module,
    chess: chess_module
}
Array.from(document.querySelectorAll('.play-game-button'), function(div) {
    div.onclick = function(e) {
        var clicked_element = e.target;
        var current_module = clicked_element.dataset.game_module;
        game_modules[current_module]();
    };
});

.play-game-button {
    border: 1px solid; 
    background: silver;
    display: inline-block;
    padding: 5px
}

<div id="battle-ships-button" class="play-game-button" data-game_module="battleship">Chose Battleships</div>
<div id="chess-button" class="play-game-button" data-game_module="chess">Chose Chess</div>