jQuery "on" 的 Dojo 版本单击

Question

<ul>
    <li class="foo" data-something="earth">one</li>
    <li class="foo" data-something="wind">two</li>
    <li class="foo" data-something="fire">three</li>
</ul>

要获取 data-* 属性的值，在 jQuery 中我会写：

$(document).on('click', '.foo', function(e){
   // get the attribute of the specific .foo that was clicked
   // clicking "two" assigns the value "wind" to bar
   var bar = $(this).data('something');
});

在 Dojo 中，我试过：

on(query('.foo'), 'click', function(e){
   // get the attribute of the specific .foo that was clicked
   var bar = dojo.attr(this, 'data-something');
});

但我发现 this 上下文是 "not working" 和 expected/wanted 并且我得到 n 数量的 bar 而不是 1 .我试过了：

query('.foo').forEach(function(e) {
    on(e, 'click', function(evt) {
        var bar = dojo.attr(this, 'data-something');
    });
});

但我没有得到一致的结果....基本上我想访问来自特定 .foo 单击的 data-* 属性，不是全部，并且将不胜感激方向.

Answer 1

我不确定你做错了什么，因为你的第一次尝试对我有用，也许你没有分享的一段代码有问题？这是一个工作示例：

require([
    'dojo/on',
    'dojo/query',
    'dojo/domReady!'
], function(
    on,
    query
) {

    on(query('.foo'), 'click', function (e) {
       var bar = dojo.attr(this, 'data-something');
       alert(bar);
    });
    
});

<!DOCTYPE html>
<html>
    <head>
        <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    </head>
    <body>
        <ul>
            <li class="foo" data-something="earth">one</li>
            <li class="foo" data-something="wind">two</li>
            <li class="foo" data-something="fire">three</li>
        </ul>
    </body>
</html>

jQuery "on" 的 Dojo 版本 单击

Dojo Version of jQuery "on" Click

dojo

jQuery "on" 的 Dojo 版本单击