无法从html onclick启动javascript函数

Question

我确信这对你来说是一个非常简单的问题，但我只是不明白。

我有一些PHP代码显示一个表格，其中我有一个div，onclik应该触发一个函数来改变点击的元素背景颜色。

这是我的HTML：

<div class='modRequiredLink' onclick='test();'>
   <div id='animated-example' class='animatedSlide'></div>
</div>

这是功能：

function test() {
    $(".modRequiredLink").click(function (event) {
        $(this).find("#animated-example").toggleClass("red");;
    });
}

现在，像这样它可以工作，但它需要两次点击才能被触发，而如果我将功能改为这样：

function test() {
        $(this).find("#animated-example").toggleClass("red");;
}

它不再起作用了......

为什么呢？任何建议？提前谢谢

Answer 1

您的第一个代码段运行test()函数，该函数仅绑定在click事件时调用的处理程序，但它实际上并未调用它。

您的第二个代码段无效，因为this并未指向被点击的元素（而是指向全局window）。试试这个：

<div class='modRequiredLink' onclick='test(this);'>

function test(elm) {
    $(elm).find("#animated-example").toggleClass("red");
}

Answer 2

试试这个：

function test() {
        $("#animated-example").toggleClass("red");
}

并非所有事情都必须与$（this）挂钩。