我是我的Rails 5应用程序,我正在构建一个动态菜单,根据用户的位置将用户路由到网站的特定部分。当他们点击主页上的菜单项时,会显示一个模式,供他们选择我们提供的四个位置之一。然后使用click方法的函数应该获取data-属性并将其插入url路径以重定向它们。即使硬编码,我似乎无法获取数据属性 - 我只是在控制台中得到一个未定义。
我不在这里包括模态代码,因为它不是问题;它会像控制台一样在路径中打开并插入/ undefined / undefined /。我的问题只是获取this
数据值。
_sidebar.html.erb
<div id="ss_menu">
<% @cat.each do |c| %>
<div class="ss_button"><%= c.name %></div>
<div class="ss_content">
<ul>
<% c.subcategories.each do |s| %>
<li>
<a href="#"
data-id="<%= s.id %>"
data-category="<%= c.slug %>"
data-subcategory="<%= s.slug %>"
data-toggle="modal"
data-target=".mlc-modal"><%= s.name %></a>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>
脚本
<script type="text/javascript" charset="utf-8">
$(document).on("click", ".ss_button", function () {
var id = $(this).data('id');
var category = $(id).data('category');
var subcategory = $(id).data('subcategory');
console.log(id);
console.log(category);
console.log(subcategory);
$('.modal-content a').attr('href', function () {
return this.href + category + '/' + subcategory;
});
});
</script>
var id = $(this).data('id');
这里$(this)
指的是没有<div class="ss_button">
属性的data-id
。
所以它总是来自(输出)undefined
。
ss_button
元素本身没有任何数据属性。因此,this
在该函数中引用<div class="ss_button">
,指向一个没有任何数据属性的元素。这就是$(this).data('id')
回归undefined
的原因。