在$(this)中用class改变跨度的CSS

Question

我有以下HTML结构:

<div class=module onclick="systemMenuRevealModule(this)"><span>Dashboard</span> 
    <div class=module_function><span>Performance</span></div>
    <div class=module_function><span>Alerts</span></div>
</div>
<div class=module onclick="systemMenuRevealModule(this)"><span>Favorites</span>
    <div class=module_function><span>Dashboard</span></div>
</div>

脚本:

<script>
    function systemMenuRevealModule(el){
        $('.module_function span').css('display', 'none');
        $(this).find(".module_function span").css('display', 'block');


    }
</script>

我试图只显示被点击的div内的跨度.这是菜单结构代码的一部分.我试图使这项工作没有ID,使代码更通用.我在控制台中没有看到任何错误,没有任何反应？

Answer 1

那是因为this在点击处理程序中引用的window对象不是被点击的元素.您将单击的元素传递给处理程序,使用它:

function systemMenuRevealModule(el) {
    $('.module_function span').css('display', 'none');
    $(el).find(".module_function span").css('display', 'block');
}

不使用onclick属性的替代方法:

var $spans = $('.module_function span');
$('.module').on('click', function() {
     // `this` here refers to the clicked element
     $spans.hide();
     $(this).find(".module_function span").show();
});