javascript - 单击时 onclick 事件未添加类

Question

这是我的问题的jsFiddle 演示

HTML

<div onclick="toggleFolder()" title="on" class="folderImage"><img src="..." id=" /></div>

javascript:

function toggleFolder() {
    var toggle = $(this).attr('title');
    if( toggle == 'on' )
    {
        $(this).addClass("folderImageActive");
        $(this).attr('title','off');
    }
    else
    {
        $(this).removeClass("folderImageActive");
        $(this).attr('title','on');
    }
}

问题是当我单击图像时，什么也没有发生。我期待它添加类“folderImageActive”，但它似乎没有这样做。

Answer 1

在您的函数内部，不this指window代元素，因为您“通常”调用该函数：func()。您必须this明确设置

onclick="toggleFolder.call(this)"

或者更好的是，将事件处理程序与 jQuery 绑定：

$('div.folderImage').click(toggleFolder);

您还可以将功能简化为：

function toggleFolder() {
    $(this).toggleClass('folderImageActive');
}

---

资源：

• quirksmode.org - 事件处理简介
• quirksmode.org -this在事件处理程序中
• MDN -this
• jQuery - 事件基础

Answer 2

对所有事情都使用 jQuery（几乎）：

$('.folderImage').on('click', function() {
    $(this).toggleClass('folderImageActive', this.title=='on');
    this.title = this.title == 'on' ? 'off' : 'on';
});

Answer 3

我认为您必须将单击的元素作为参数传递给函数：

<div onclick="toggleFolder($(this))" title="on" class="folderImage"><img src="..." id=" /></div>

你的功能：

<script>
function toggleFolder($this) {
  //your code
}
</script>

或者，使用.on(). 给你的 div 一个 id 或类：

<div class="image-class" title="on" class="folderImage"><img src="..." id=" /></div>

然后，使用 jQuery 的on：

$(document).on("click", ".image-class", function () {
  var isOn= this.title === 'on';
  this.title= isOn ?  'off' : 'on';
  $(this).toggleClass("folderImageActive", isOn);
});