使用jQuery click()方法定义$(this).data(value)的未定义值

问题描述 投票:1回答:2

我是我的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>
javascript jquery html
2个回答
0
投票
var id = $(this).data('id');

这里$(this)指的是没有<div class="ss_button">属性的data-id

所以它总是来自(输出)undefined


1
投票

ss_button元素本身没有任何数据属性。因此,this在该函数中引用<div class="ss_button">,指向一个没有任何数据属性的元素。这就是$(this).data('id')回归undefined的原因。

© www.soinside.com 2019 - 2024. All rights reserved.