Изменить текст в тэгах

Question

Я хочу изменить текст в тегах p, чтобы получить (при нажатии на текст) свойства, заданные классом атрибуции.

Вот HTML:

<p onclick="function">Hello</p> 

CSS:

.attribution{ 
color:blue; 
font-weight:bold; 
} 

Javascript:

var main = function() { 
$('<p>').text('.attribution'); 
}; 
$(document).ready(main); 

Спасибо!

Answer 1

Хорошо, так как ваша загрузка JQuery, почему бы не использовать его методы для обработки событий щелчка и изменения свойств css.

$("p").on("click", function() { 
 
    $(this).addClass('attribution'); 
 
});

Answer 2

<p onclick="function">Hello</p> 

Вам:

1. должны использовать имя функции, а не ключевое слово function, который создает новую функцию.
2. Обязательно называть функцию, добавив () к имени переменной
3. Не следует использовать атрибуты собственных атрибутов. Связать обработчики событий с JavaScript.

Так

<p>Hello</p> 

<script> 
    $("p").on("click", main); 
</script> 

var main = function() { 
$('<p>').text('.attribution'); 
}; 
$(document).ready(main); 

Вы:

1. Если использовать объявление функции (так как он играет хорошо с отладчиков)
2. Необходимо выбрать существующий вместо создания (И тут же отбрасывая) новый)
3. Добавить attribution в классы на элемент вместо того, чтобы заменить текстовое содержание его с фразой ".attribution"
4. Не вызывает функцию на DOM готова, когда вы хотите его назвать, когда что-то щелкнуло

Такого

function main() { 
    $('p').addClass('attribution'); 
}; 

---

Как и в стороне, пункты не предназначены, чтобы быть интерактивными. Пока вы можете нажимать на них указателем мыши, ничто не поощряет людей делать это, они находятся за пределами обычного списка фокуса (так что люди, которые не используют мышь, не могут вставлять их в закладки) и не отображаются в экранных читателях, как что-то, на что нужно щелкнуть. Используйте соответствующую разметку (возможно, кнопку).

Answer 3

1) Вы фактически не подключаете функцию обратного вызова к событию onclick. Вам нужно указать, какую функцию вы хотите выполнить при нажатии. Итак: HTML:

<p onclick="addClass(event)">Hello</p> 

JavaScript:

function addClass(evt){ 
     evt.target.classList.add('attribution'); 
    } 

JQuery альтернатива:

var main = function(){ 
    $("p").click(function(){ 
     $(this).addClass("attribution"); 
    }); 
} 
$(document).ready(function(){ 
    main(); 
});