Question

以下是我的问题的jsFiddle Demo

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

<强>资源：

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或class：

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

onclick事件在单击时不添加类

3 个答案: