时间戳

首页 > 解决方案 > 使用数据属性调用函数

jquery - 使用数据属性调用函数

问题描述

<div class='cmenu esc' id='cma'>
<div class='cmitem' data-fn='itemcut'>CUT</div>
<div class='cmitem' data-fn='itempaste'>PASTE</div>
<div class='cmitem' data-fn='itemdel'>DELETE</div>
</div>

js

$('.cmitem').click(function(){
    var fn = $(this).attr('data-fn');
    $(window)[fn]();
});

function itemcut(){
    console.log('test');
}

错误： Uncaught TypeError: $(...).fn is not a function

那么如何以这种方式调用函数呢？

标签： jquery

解决方案

jQuery 不直接公开 Element 属性。您必须使用attr()or prop()ordata()方法。但是，在这种情况下，在窗口上使用 jQuery 是没有意义的。直接引用就好了。

$('.cmitem').click(function() {
  //changed to use data() rather than attr()
  var fn = $(this).data('fn');
  var targetFunction = window[fn];
  
  //added some safety checking
  if (typeof targetFunction === 'function') {
    targetFunction();
  }
});

function itemcut() {
  console.log('test');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='cmenu esc' id='cma'>
  <div class='cmitem' data-fn='itemcut'>CUT</div>
  <div class='cmitem' data-fn='itempaste'>PASTE</div>
  <div class='cmitem' data-fn='itemdel'>DELETE</div>
</div>

推荐阅读