我想知道使用Meteor从事件对象中检索自定义数据HTML属性值的最佳方法是什么?
例如:
article.html
<template name="createArticle">
<form class="new-article">
<input type="text" name="title" placeholder="New title"/>
<input type="text" name="content" placeholder="New content" />
<!-- list categ -->
<label>Category
<select id="categ-list" name="categ">
{{#each categories}}
<option value="{{name}}" data-id={{_id}}>{{name}}</option>
{{/each}}
</select>
</label>
<input type ="submit" value= "Create" class="button">
</form>
</template>
article.js
Template.createArticle.events({
"submit .new-article": function(event){
var title = event.target.title.value;
var content = event.target.content.value;
var categName = event.target.categ.value;
var categId = event.target.categ.data('id'); // HERE
console.log("test " + categId);
Meteor.call("addArticle", title, content, categId, categName);
event.target.title.value = "";
event.target.content.value = "";
return false;
},
"click #categ-list": function(event){
console.log('click');
}
});
如何data-id
在事件处理程序中获取属性值?
编辑:添加更多代码
编辑2:
console.log(event.target.categ)
输出:
<select id="categ-list" name="categ">
<option value="test" data-id="p5zKaEbEiRkQjCkGg">test</option>
<option value="test1" data-id="okPY6oyeXiFR7M3jd">test1</option>
</select>
DOM元素(HTMLElement
对象)没有.data()
方法。.data()
方法属于jQuery对象。如果您使用的是jQuery,则应使用jQuery构造函数包装元素,然后使用.data
方法:
$(event.target.categ).data('id');
另一种选择是使用.dataset
属性1:
event.target.categ.dataset.id;
或.getAttribute()
方法:
event.target.categ.getAttribute('data-id');
更新:
使用dataset
属性之前,还应该选择选定的选项。
var sel = event.target.categ;
var categId = sel.options[sel.selectedIndex].getAttribute('data-id');
1. IE10及以下版本部分支持该属性。Android 2.3无法data-*
从select
元素读取属性。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句