Question

一直试图解决这个问题。我希望用户单击一个href，获取该href的数据属性，然后在DOM中找到与该数据属性匹配的类（它将是一个li，并为其添加一个活动类。< / p>

到目前为止，我已经尝试了100种不同的东西：

$('ul li a').click(function(){
    $(this).parent().removeClass('active');
    var dataitem = $(this).data('item');
    $('ul li').find(dataitem).addClass('active');
    console.log(dataitem);
});

HMTL：

<ul class="anim cf">
    <li class="first active">
        <span class="drop"></span>
        <a href="#" data-item="first"></a>
        <a href="#" data-item="second"></a>
        <a href="#" data-item="four"></a>
    </li>   
<li class="second">
        <span class="drop"></span>
        <a href="#" data-item="first"></a>
        <a href="#" data-item="second"></a>
        <a href="#" data-item="four"></a>
    </li>   
<li class="third">
        <span class="drop"></span>
        <a href="#" data-item="first"></a>
        <a href="#" data-item="second"></a>
        <a href="#" data-item="four"></a>
    </li>   
</ul>

Answer 1

.find()方法允许搜索选择器中指定的元素的后代，但在您的情况下.find()将不起作用。

试试这个： -

$('ul li a').click(function(e){
    $('ul li.active').removeClass('active'); //remove '.active' class from all li's
    var dataitem = $(this).data('item');
    $('ul li.' + dataitem).addClass('active');
    e.preventDefault();
});

Working Demo

查找数据属性并添加类

1 个答案: