В приведенном ниже коде я использую jquery, чтобы найти элемент, который я нажал, "это", и все, что я нажал, я хочу, чтобы "этот" фон изменился на красный. Тем не менее, он работает только в том случае, если я определяю тег внутри строки цвета изменения или "что я нажимаю".
Почему код ниже не меняет цвет того, что я нажал на красный?
<script>
$(document).ready(function() {
$(this).click(function() {
$(this).css("background-color","red");
});
});
</script>
Если вы хотите использовать только элементы <h1>
и <p>
без непосредственного использования оператора if
, используйте соответствующий селектор, который будет устанавливать его для каждого элемента.
$('h1, p').click(function () {
$(this).css('background-color', '#F00');
});
Если вам нужно, оберните код вызовом $(function(){})
, который является сокращением для $(document).ready(function(){})
.
Однако, чтобы не создавать так много прослушивателей событий, вы можете вместо этого использовать один прослушиватель событий, который связывается с документом и обрабатывает его, фильтруя результат:
$(document).click(function () {
$(event.target).filter('h1, p').css('background-color', '#F00');
});
Как отметил Феликс, это будет больше jQuery - как это сделать, хотя это почти то же самое:
$(document).on('click', 'h1, p', function () {
$(this).css('background-color', '#F00');
});
filter
элементов? (Я имею в виду, это на самом деле не имеет значения, но я думаю, это было бы более jQuery).
$(document).ready(function() {
$('*').click(function(e) {
e.stopPropagation()
$(this).css("background-color","red");
});
});
если вы хотите, чтобы h1
и p
теги менялись до красного цвета при нажатии, измените строку
$(this).click(function() {
в
$('h1, p').click(function() {
this
ключевое слово внутри click
обработчика событий относится к фактическому элементу, обработке, т.е. h1
или p
элемента. Вы можете использовать event.currentTarget
, но нет реальной причины, почему вы должны.
this
относится к элементу, к которому привязан обработчик, а не к элементу, вызвавшему событие (они могут быть, конечно, одинаковыми).
Внутри ready
обработчика this
относится к document
. Таким образом, вы являетесь обязательными для обработчика событий нажмите на document
и, следовательно, this
внутри обработчика событий всегда будет ссылаться на document
, а также.
Похоже, вы ищете event.target
:
$(document).click(function(event) { // 'document' is clearer than 'this'
$(event.target).css("background-color","red");
});
event.target
всегда ссылается на элемент, вызвавший событие.
Я рекомендую прочитать учебник jQuery об основной обработке событий.