主页 / 问题 / 1130717
Accepted
Proshka
Asked:2020-05-24 21:36:04 +0000 UTC2020-05-24 21:36:04 +0000 UTC

无法弄清楚为什么代码不起作用

  • 772

显然问题是在这个？或者如何为发生事件的元素执行函数？ 

function color() {
        $(this).children().css('backgroundColor','red');
    }
    
$('#one').click(function () {
    color();
});
$('#two').click(function () {
    color();
});
.item{
        display: block;
        height: 50px;
        margin-bottom: 50px;
        border: 1px solid #0C9A9A;
    }
    .item div{
        display: block;
        height: 100%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="item">
    <div></div>
</div>
<div id="two" class="item">
    <div></div>
</div>

javascript

2 个回答

  1. $('#one').click(color);
$('#two').click(color);
    • 2
  2. Best Answer

    此代码中的问题是访问上下文。在您添加的示例中，this它将undefined等于 该函数color被直接调用。您需要使用以下代码：

    function color(target) {
    $(target).children().css('backgroundColor','red');
}

$('#one').click(function (e) {
    color(e.currentTarget);
});
$('#two').click(function (e) {
    color(e.currentTarger);
});

    上面还添加了一个不错的选项来将此函数作为回调传递。它通常是优选的。

    • 1

相关问题