如何使用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

你不需要有兩個分開的div s。你可以改變類來「切換」圖標（FontAwesome允許你這樣做）。

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>

• 在onclick事件偵聽器this讓你參考觸發click事件的元素。
• 在該函數中，我們從觸發事件的父節點獲取i子元素。
• 一對變量，用於打開/關閉心臟的類。
• 我們切換每個班級，因此如果opened班級存在，我們將其刪除。與closed類相同。

Answer 2

你說，你必須爲每個特定的心臟圖像相關的ID（在你的代碼沒有顯示）。所以，你會參考id（使用document.getElementById(2)代碼）。您將通過更改圖像圖標（DOM元素）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 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>元素; cssposition: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>