控制台日志返回未定义

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>