Question

我正在尝试构建一个多级移动菜单。我想使用自定义属性（数据键）。问题是，我无法获取属性值。我试图记录它，并且返回未定义。

$(".js_menu-link").on("click", (e) => {
  e.preventDefault();
  console.log($(this).attr("data-key"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

Answer 1

要获取您所用的属性值，您需要使用each()方法。这是一个简单的例子。

$('.js_menu-link').each(function() {
  console.log($(this).attr("data-key"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

在此示例中，您可以一一获得属性的值。然后点击。

$('.js_menu-link').click(function(event) { 
  event.preventDefault() 
  console.log($(this).attr("data-key")); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="">ANA SƏHİFƏ</a></li>
    <li><a href="" class="js_menu-link" data-key="1">FİTNES <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="2">İDMAN <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="3">BİLYARD <i class="fas fa-angle-right"></i></a></li>
    <li><a href="" class="js_menu-link" data-key="4">ÜZGÜÇÜLÜK <i class="fas fa-angle-right"></i></a></li>
    <li><a href="">ƏLAQƏ </a></li>
</ul>

控制台日志返回未定义

1 个答案: