0

我在使用 PrototypeJS 1.6.0.3 访问锚的属性时遇到问题。

当我对 course_number 变量进行硬编码时，下面的代码可以工作，但是我希望能够从锚点中提取它。

这是我的锚标签：

<a class="course_number_info_link" data-course-number="{$foo}" href="#">{$foo}</a>

这是我观察锚点单击的调用方法：

$$('.course_number_info_link').invoke('observe', 'click', this.getCourseInfo(this));

这是我的getCourseInfo方法，但是course_number并没有成功。如何访问数据属性？

    getCourseInfo: function(element) {

       var course_number = element.readAttribute('data-course-number');

       console.log(course_number);

       new Ajax.Updater('result-' + course_number, '/ajax/get_course_info.php', {
                parameters: { course_no: course_number },
                onSuccess: function(response) {
                    console.log(response);
                }
       });

    }
4

2 回答 2

4

您设置观察者的方式是它失败的原因 - 您将完整的函数传递给观察者而不是函数引用

如果这是在您的对象内部运行，那么this是对象而不是元素

$$('.course_number_info_link').invoke('observe', 'click', this.getCourseInfo(this));

应该

$$('.course_number_info_link').invoke('observe', 'click', this.getCourseInfo);

传入的参数getCourseInfo()将是 Event 对象而不是元素对象 -this应该是元素对象，或者您也可以像这样获取元素

getCourseInfo: function(event) {

   var element = event.findElement();
   var course_number = element.readAttribute('data-course-number');
//snip....
于 2013-11-06T00:04:53.153 回答
2

虽然 Geek Num 88 提供的答案在指出观察者的错误设置方面是正确的，但它并没有完全解释如何正确访问data-* 属性。当然，最简单的方法是原型Element.readAttribute()，但您也可以使用所有现代浏览器上都可用的原生Element.dataset 。所以而不是：

var course_number = element.readAttribute('data-course-number');

你可以使用：

var course_number = element.dataset.courseNumber;

如果您需要对旧版浏览器进行后备，您可以实现以下内容：

Element.addMethods({
    addDataset: function(e){
        if(!(e = $(e))){
            return;
        }
        if(!e.dataset){
            e.dataset = {};
            $A(e.attributes).each(function(a){
                if(a.name.match(/^data-/)){
                    e.dataset[a.name.substr(5).camelize()] = a.value;
                }
            });
        }
        return e;
    }
});
于 2014-01-11T20:07:54.963 回答