javascript - $(this).data(value) 与 jQuery click() 方法的未定义值

Question

在我的 Rails 5 应用程序中，我正在构建一个动态菜单，以根据用户的位置将用户引导至网站的特定部分。当他们点击主页上的菜单项时，会显示一个模式供他们选择我们送货到的四个地点之一。然后，带有 click 方法的函数应该获取 data- 属性并将其插入到 url 路径中以重定向它们。我似乎无法让数据属性通过，即使是硬编码 - 我只是在控制台中得到一个未定义的。

我没有在此处包括模态代码，因为这不是问题所在；它打开并在路径中插入/undefined/undefined/就像控制台一样。我的问题只是获取这个数据值。

_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>

Answer 1

ss_button元素本身没有任何数据属性。所以，this在那个引用 <div class="ss_button"> 的函数中, 指向一个没有任何数据属性的元素。这就是为什么 $(this).data('id')返回 undefined .