jQuery Изменение цвета по клику

Я начинаю jQuery и хочу добиться следующего - всякий раз, когда я нажимаю на любой элемент страницы, я хочу, чтобы цвет текста внутри него был изменен на красный. Это то, что у меня есть, но это не работает. Удивительно, что в уведомлении также ничего не печатается. Но он выполняется, когда я тестировал его с помощью другого оператора оповещения. Благодарю.jQuery Изменение цвета по клику

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <div>Cow</div> 
    <div>Cat</div> 
    <p>paragraph</p> 
    <p>coconut</p> 

    <script type="text/javascript" src="../Scripts/jquery-2.0.3.js"></script> 
    <script type="text/javascript"> 
     $(this).click(function() { 
      var v = $(this).text(); 
      alert(v); // this prints nothing !!!! 
      $(this).css("color", "red"); 
     }); 
    </script> 
</body>

источник

2013-11-02 VVV

А что вы ожидаете '$ (это)' быть? –

любой элемент страницы - p, div, a и т. Д. – VVV

Если присоединить обработчик щелчка к document, любой щелчок, что пузырьки до документа будет идти к слушателю событий.Если теперь в слушателе искать event.target, что будет узел, который инициировал событие:

$(document).click(function (event) { 
    $(event.target).css("color", "red"); 
});

пример: http://jsfiddle.net/E9H22/

источник

2013-11-02 22:31:11 Niklas

Спасибо Niklas, ваш подход работает правильно, но это оказалось немного продвинутым. Я думал, что мой способ может работать, но он будет работать, только если я использую отдельные селекторы. – VVV

@VVV Что вы пытаетесь сделать, или почему этот подход не подходит для вас? – Niklas

Нет вашего подхода. Но я думал, что мой подход также должен работать, и я мог бы сделать какую-то простую ошибку. Но, оказывается, нам нужно использовать что-то новое (по крайней мере для меня) для достижения такого поведения. – VVV

Вам нужно завернуть, что в документе готовый заявление, и прикрепить щелчок слушателя к реальному элементу:

$(function(){ 
    $("*").click(function() { 
    $(this).css("color", "red"); 
    }); 
});

Ваш селектор может выглядеть примерно так $("div, p").click(...) в зависимости от того, какие элементы вы хотите быть активными.

источник

2013-11-02 22:26:31 hiattp

Действительно? Мне нужно сделать это для каждого отдельно? – VVV

Этот селектор '' * '' универсален. Это медленно и не рекомендуется, но я использую его, чтобы проиллюстрировать суть. – hiattp

Если указать body элемент (вместо this), то она работает:

$('body').click(function() { 
    var v = $(this).text(); 
    alert(v); // this prints something, now. 
    $(this).css("color", "red"); 
});

JS Fiddle demo.

Вы также можете, конечно, использовать:

$(this.document.body).click(function() { 
    var v = $(this).text(); 
    alert(v); // this prints something, now. 
    $(this).css("color", "red"); 
});

JS Fiddle demo.

Если вы хотите только щелкнул-элемент, чтобы его текст краснеют:

$('body').click(function (e) { 
    $(e.target).css("color", "red"); 
});

JS Fiddle demo.

источник

2013-11-02 22:27:32

Спасибо Дэвиду, но в вашем примере JS Fiddle - все меняется на красный на 1 клик. – VVV

См. Обновленный ответ (в настоящее время последний код-блок и демонстрационный файл). –

$(this).click(function() {

Это ваша проблема.

Вместо того, чтобы говорить this, вам нужно использовать селектор CSS, чтобы указать, какие элементы меняют цвет.

Например, вы могли бы попробовать

$('div').click(function() { // Will change the color of the divs 
    var v = $(this).text(); 
    alert(v); // this prints nothing !!!! 
    $(this).css("color", "red"); 
}); 
$('p').click(function() { // Will change the paragraphs 
    ... 
}); 
$('p, div').click(function() { // Will work for either one! 
    ... 
}); 
$('*').click(function() { // Will work for any element on the page 
    ... 
});

источник

2013-11-02 22:27:40 Paul

В вашей

$(this).click(function() {

«это» не относится к месту, где < сценарий > тег расположен, а скорее относится к объекту окна , Таким образом, в сущности, ваш код делает это:

$(window).click(function(){

Если вы хотите, чтобы корова краснеть, когда мыши, изменить HTML для:

<div id="cow">Cow</div>

И ваш сценарий:

// callback needs to be inside $(document).ready(fn) to make sure the DOM is ready when trying to use it 
$(document).ready(function() { 
    // and we need to refer to an explicit element 
    $('#cow').click(function(){ 
     // now we can refer to "this", since inside the click handler's context is the clicked element 
     $(this).css({color: 'red'}); 
    }); 
}

источник

2013-11-02 22:30:01

Вы должны указать, к какому элементу вы хотите добавить событие click. Например. это будет работать для всех Div-элементов:

$('div').click(function() { 
    $(this).css("color", "red"); 
});

источник

2013-11-02 22:30:06 Daniel

jQuery Изменение цвета по клику

ответ

Смежные вопросы