javascript - 如何使用javascript显示和隐藏特定的div？

Question

我在一个页面上有多个图像。每个图像都有一个与其关联的 id。对于每张图像，我希望用户能够单击一颗心。当用户单击一颗心时，打开的心形图标应替换为该图像的闭合的心形图标。同样，当用户取消对图像的关注时，闭合的心形图标应替换为打开的心形图标。

我在 javascript 中正确实现此功能时遇到问题。我如何仅引用需要更改的图标？关于如何实现这一点有什么建议吗？

Javascript

<script >
  function wantToGo(id) {
    console.log(id);
  }

  function dontWantToGo(id) {
    console.log(id);
  }
</script>

HTML

<div class='col-md-4'>
  <img src = "http://i.imgur.com/gwzxVWi.jpg ">
  <!-- Open heart icon -->
  <a href = "#" onClick = "wantToGo(4)"><i class="fa fa-heart-o"></i></a>
  <!-- Closed heart icon -->
  <a href = "#" onClick = "dontWantToGo(4)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>

<div class='col-md-4'>
  <img src = "http://i.imgur.com/Ohk2jxC.jpg ">
  <a href = "#" onClick = "wantToGo(5)"><i class="fa fa-heart-o"></i></a>
  <a href = "#" onClick = "dontWantToGo(5)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;"></i></a> 
</div>

Answer 1

您不需要有 2 个独立的 div。您只需更改类即可“切换”图标(FontAwesome 允许您这样做)。

function switchHeart(el){
	var icon = el.querySelector('.fa');//Get the i element from his parent
	var opened = 'fa-heart-o';
	var closed = 'fa-heart';

	icon.classList.toggle(opened);
	icon.classList.toggle(closed);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" onclick="switchHeart(this)"><i class="fa fa-heart-o" style="color:red"></i></a>

onclick 事件监听器中的
• this 允许您引用触发点击事件的元素。
• 在函数中，我们从触发事件的父元素获取 i 子元素。
• 一对带有打开/关闭心脏类的变量。
• 我们切换每个类，因此如果存在opened类，我们会将其删除。与封闭类相同。