Javascript 制作一个按钮以更改父项'；CSS的classname属性

因此，我有一个javascript函数来更改div的类名

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函数中更改什么？

这应该可以

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

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

函数翻转（elementId）
{ 
var element=document.getElementById（elementId）
element.className=（element.className='card'）？'card fliped'：'card'；
} 

这应该行得通

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

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

函数翻转（elementId）
{ 
var element=document.getElementById（elementId）
element.className=（element.className='card'）？'card fliped'：'card'；
} 

$（'imgSelector'）。单击（函数（）{

$（“.card”）.toggleClass（'card fliped'）

}))；

使用jQuery，您可以这样做

使用简单的javascript，您必须为DIV提供一个id，然后不用event.target，只需使用document.getElementById（'myDIVID'）

$（'imgSelector'）。单击（函数（）{

$（“.card”）.toggleClass（'card fliped'）

}))；

使用jQuery，您可以这样做

---

使用简单的javascript，您必须为DIV提供一个id，然后不用event.target，只需使用document.getElementById（'myDIVID'）

事件对象具有对发起事件的元素的引用。 您可以使用

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中的原始元素，

srcement

是IE中的相同元素。ff/chrome中的

currentTarget

是调用处理程序的元素，它可能不是您单击的相同元素。例如，如果您在div的右侧附加了一个click处理程序，那么当您单击其中的图像时，它将触发。当div的处理程序启动时，

currentTarget

将是div，

target

将是映像。IE没有与我所知道的

currentTarget

并行。

事件

对象引用了发起事件的元素。
您可以使用
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中的原始元素，
srcement
是IE中的相同元素。ff/chrome中的
currentTarget
是调用处理程序的元素，它可能不是您单击的相同元素。例如，如果您在div的右侧附加了一个click处理程序，那么当您单击其中的图像时，它将触发。当div的处理程序启动时，
currentTarget
将是div，
target
将是映像。据我所知，IE没有类似于
currentTarget
。
我不确定，但我认为如果您有几个类“card”的元素，并且您只想更改单击的元素，John solution可能会有问题

为此，请使用“this”作为参数：

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

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


函数翻转（元素）
{ 
element.className=（element.className='card'）？'card fliped'：'card'；
} 
我不确定，但我认为如果类“card”有多个元素，并且只想更改单击的元素，John solution可能会有问题

为此，请使用“this”作为参数：

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

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


函数翻转（元素）
{ 
element.className=（element.className='card'）？'card fliped'：'card'；
} 
问题没有指定jquery。问题没有指定jquery。好吧。。。IE缺乏可比性似乎永远不会结束！这是非常有益的。我确信，从我的问题的性质来看，显然我还有很多关于javascript的知识需要学习。这有助于我了解我的修复是如何工作的。干杯好。。。IE缺乏可比性似乎永远不会结束！这是非常有益的。我确信，从我的问题的性质来看，显然我还有很多关于javascript的知识需要学习。这有助于我了解我的修复是如何工作的。干杯