Question

所以我有一个更改div的类名的javascript函数

function flip (event)
{
  var element = event.currentTarget;
  element.className = (element.className == 'card') ? 'card flipped' : 'card';
}

如何制作，以便我的onclick="flip(event)"可以附加到按钮（或最好是图像），然后按钮将翻转卡而不是单击div内部。像

这样的东西

<div id="card" class="card">
  <p>
    whatever
  </p>
<img onclick="flip(event)" src="foo">
</div>

我的javascript函数需要更改什么？

Answer 1

这应该有效

<img onclick="javascript:flip('card');" />

function flip (elementId) 
{ 
  var element = document.getElementById(elementId)
  element.className = (element.className == 'card') ? 'card flipped' : 'card'; 
}

Answer 2

$('imgSelector').click(function() {



$(".card").toggleClass('card flipped');

});

使用jQuery你可以这样做。

使用简单的javascript，您必须为您的DIV提供ID。然后只使用document.getElementById（'myDIVID'）;而不是使用event.target;

Answer 3

event对象具有对发起事件的元素的引用。您可以使用parentNode来备份树。

这将适用于您的html示例。

function flip (event)
{
    var image = event.target || event.srcElement;
    var div = image.parentNode;
    div.className = (div.className == 'card') ? 'card flipped' : 'card';
}

target是ff / chrome中的原始元素，srcElement是IE中的相同元素。 ff / chrome中的currentTarget是调用处理程序的元素，它可能与您单击的元素不同。例如，如果您在div上附加了一个单击处理程序，那么当您单击其中的图像时它将会触发。当div的处理程序触发时，currentTarget将是div，target将成为图像。 IE与我所知道的currentTarget没有平行关系。

Answer 4

我不确定，但是如果你有几个带有'card'类的元素并且你只想更改被点击的元素，我认为John解决方案可能有问题。

为此，请使用'this'作为参数：

<img onclick="javascript:flip(this.parentElement);" />

function flip (element) 
{ 
  element.className = (element.className == 'card') ? 'card flipped' : 'card'; 
}

创建一个按钮来更改父级的CSS classname属性

4 个答案: