jQuery 数据属性显示和隐藏

Question

在我的网页中，我有以下菜单链接：

<li class="menu1"><a data-menu="#breakfast">Breakfast</a></li>
<li class="menu2"><a data-menu="#lunch">Lunch</a></li>

<div class="row menu-row" id="breakfast"></div>
<div class="row menu-row" id="lunch"></div>

我需要找到带有 #breakfast 的 div 并显示它。这是我尝试过的：

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide(); // hide all
    $(this).attr("data-id").show; //how to find and show the matching div?
});

我怎样才能使这个工作？

Answer 1

首先，您可以使用 data() 检索数据属性，因为它更快。这将为您 return 一个字符串，您可以将其放入选择器以获取所需的元素：

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide();
    $($(this).data('menu')).show(); 
});

鉴于您的 HTML，您似乎希望从单击的项目中检索 data-menu 值，而不是 data-id。另请注意，您错过了 show() 调用的尾随括号。

jQuery 数据属性显示和隐藏

jQuery data attribute show and hide

jquery

custom-data-attribute