更改p标签中的文本

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

<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时，不要调用DOM上的函数

这样的

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

顺便说一下，段落不是为了互动而设计的。当你可以用鼠标指针点击它们时，没有什么可以鼓励人们这样做，它们超出了正常的焦点列表（所以不使用鼠标的人不能选中它们）和不要在屏幕阅读器中显示应该点击的内容。使用适当的标记（可能是一个按钮）。

Answer 2

好的，因为你加载JQuery为什么不使用它的方法来处理点击事件和改变css属性。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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();
});