Не могу понять, почему не работает код

Question

Видимо, вопрос в this? Или как для элемента, на котором произошло событие, выполнить функцию?

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>

Answer 1

Проблема в данном коде в обращении к контексту. В примере который вы добавили, 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);
});

Выше также добавили хороший вариант, передавать эту функцию как колбек. Он в принципе более предпочтительный.

Answer 2

$('#one').click(color);
$('#two').click(color);

БЛОГ НА HUSL

Не могу понять, почему не работает код

Ответы (2 шт):