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();
});

在$（this）中用class改变跨度的CSS

1 个答案: