javascript - 翻转由按钮触发的卡片

Question

我想定义两张卡片，然后翻转它们来切换 View 。我想要一个编辑和保存按钮来最终触发翻转。但我一直坚持触发按钮(仍在学习)

本示例元素 here单击卡片而不是按钮本身时翻转卡片。如果我从卡片中删除操作并分配一个 onclick="flipCard()" 函数...我不确定在该函数中定义什么。

这段JS代码是我在网上的一些例子中找到的

$('.flip-card').on('click', 
  function(){
  //console.log($(this));
    $(this).toggleClass('flipped')
  }
)

我想在 onclick 方法上附加此功能。

你能给我指出正确的方向吗？

Answer 1

在 jQuery 中，您可以定位对象 $(...)，然后在回调函数中可以选择使用 $(this) 来引用它们。

所以在您的示例中，您将翻转卡作为目标:

$('.flip-card').on('click', function(){

然后翻转它:

$(this).toggleClass('flipped')

您可以轻松地将触发器附加到按钮，并将类更新到卡片。删除 onclick 位，只使用 jQuery。

// Target the button click...
$('button').click(function(e){
  // toggle the flip class
  $('.flip-card').toggleClass('flipped')
});

或者如果没有 jQuery，它会看起来像这样，定位所有按钮及其对应卡片会更加复杂，但这只是一个让您入门的指针:

document.querySelector("button").addEventListener("click", function(){
  document.querySelector('.flip-card').classList.toggle('flipped');
});