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ではこれを行うことができます）。 onclickイベントリスナーで

• this

  function switchHeart(el){ 
   
  \t var icon = el.querySelector('.fa');//Get the i element from his parent 
   
  \t var opened = 'fa-heart-o'; 
   
  \t var closed = 'fa-heart'; 
   
  
   
  \t icon.classList.toggle(opened); 
   
  \t 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>

  を使用すると、クリックイベントをトリガー要素を参照することができます。
• この関数では、イベントをトリガーした親からi子要素を取得します。
• オープン/クローズド心臓のクラスと一対の変数。
• 各クラスを切り替えますので、openedクラスが存在する場合は削除します。 closedクラスと同じです。あなたのマークアップとスクリプトへ

Answer 2

あなたは（あなたのコードで表示されていない）各特定の心臓画像のために関連付けられたIDを持っていると述べました。したがって、id（document.getElementById(2)コードを使用）で参照します。画像アイコンはDOMエレメントのsrc（ソース）属性を変更することで変更されます。あなたのHTMLで

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

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

：

<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 3

はこれを試してみてください：

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 4

いくつかの追加、以下のチェック：

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 5

あなたはhtml<input type="checkbox">、<label>要素を使用することができます。 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>