сделать кнопку, чтобы изменить родительский атрибут имени класса CSS

Question

, поэтому у меня есть функция 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?

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

Я не уверен, но я думаю, что у решения John может быть проблема, если у вас есть несколько элементов с классом 'card', и вы хотите изменить только тот, который был нажат.

Для этого используйте'this' в качестве аргумента:

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

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

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. currentTarget в ff / chrome - это элемент, который вызывает обработчик, который может не совпадать с элементом, на который вы щелкнули. например, если вы подключили обработчик кликов прямо к элементу div, он будет срабатывать при нажатии на изображение внутри. когда срабатывает обработчик div, currentTarget будет div, а target будет изображением. IE не имеет параллели для currentTarget, о котором я знаю.

Answer 4

$('imgSelector').click(function() {</p> <p>$(".card").toggleClass('card flipped');</p> <p>});

Используя jQuery, вы можете сделать это следующим образом.

С помощью простого javascript вам нужно будет присвоить идентификатор DIV.и затем вместо использования event.target просто используйте document.getElementById ('myDIVID');