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

您说您的每个特定心脏图像都有一个ID（不在您的代码中显示）。因此，您将通过id（使用document.getElementById(2)代码）引用它。您将通过更改图片图标来更改图片图标（DOM元素＆＃39; s）src（来源）属性。

<script >
function wantToGo(id)
{
  document.getElementById(id).src='openheart.png';
}

function dontWantToGo(id)
{
  document.getElementById(id).src='closedheart.png';
}
</script>

在您的HTML中：

<div class='col-md-4'>
  <img src="http://i.imgur.com/gwzxVWi.jpg" id="1">
  <a href = "#" onClick = "wantToGo(1)">...</a>
  <a href = "#" onClick = "dontWantToGo(1)">...</a> 
</div>
<div class='col-md-4'>
  <img src="http://i.imgur.com/gwzxVWi.jpg" id="2">
  <a href = "#" onClick = "wantToGo(2)">...</a>
  <a href = "#" onClick = "dontWantToGo(2)">...</a> 
</div>

Answer 2

试试这个：

Javascript：

function wantToGo(id) {

        id.nextSibling.style.visibility="true";
        id.style.visibility="false";


      }

      function dontWantToGo(id) {

        id.previousSibling.style.visibility="true";
        id.style.visibility="false";

      }

HTML：

 <div class='col-md-4'>
                <img src = "http://i.imgur.com/gwzxVWi.jpg ">

                    <!-- Open heart icon -->
                    <a href = "#" onClick = "wantToGo(this)"><i class="fa fa-heart-o"></i></a>

                    <!-- Closed heart icon -->
                    <a href = "#" onClick = "dontWantToGo(this)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;visibility:hidden;"></i></a> 



          </div>
          <div class='col-md-4'>
                <img src = "http://i.imgur.com/Ohk2jxC.jpg ">


                    <a href = "#" onClick = "wantToGo(this)"><i class="fa fa-heart-o"></i></a>


                    <a href = "#" onClick = "dontWantToGo(this)"><i class="fa fa-heart" aria-hidden="true" style = "color:red;visibility:hidden;"></i></a> 



          </div>

Answer 3

您的标记和脚本添加了一些内容，请查看以下内容：

HTML：

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

JS：

function wantToGo(me, id) {
    me.target.className = toggleClass(me.target.className);
}
function dontWantToGo(me, id) {
    me.target.className = toggleClass(me.target.className);
}
function toggleClass(val) {
  return (val === "fa fa-heart-o") ? "fa fa-heart" : "fa fa-heart-o";
}

Answer 4

您可以使用html <input type="checkbox">，<label>元素; css position:absolute，z-Index，:checked，相邻的兄弟选择器，background，url()，:hover设置cursor } pointer

.col-md-4 {
  padding: 8px;
  margin: 8px;
  border: 8px solid transparent;
}
input[type="checkbox"] {
  width: 50px;
  height: 50px;
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  opacity: 0;
  z-Index: 1;
}
input[type="checkbox"]:hover {
  cursor: pointer;
}
label {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  /* `url("/path/to/open-heart/image") */
  background: blue;
  z-Index: 0;
}
:checked + label {
  /* `url("/path/to/closed-heart/image") */
  background: red;
}

<div class="col-md-4">
  <input type="checkbox" />
  <label></label>
</div>
<br>
<div class="col-md-4">
  <input type="checkbox" />
  <label></label>
</div>

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

4 个答案: