Javascript圖片onclick

設計一個頁面，其中包含許多可供最終用戶選擇的圖像。嘗試使用這些事件（onclick，onmouseover和onmouseout）使其圖形化令人愉悅。由於每個事件都會改變多個div標籤，因此我決定使用Javascript而不是CSS。Javascript圖片onclick

爲了避免onmouseout影響點擊圖像邊界，我分配了一個變量'imgClicked'。問題是點擊每個圖片的變化相同。有沒有辦法爲每個盒子分配變量，以便每個圖像都知道它是否被點擊過。或者更好的路線？

在此先感謝！

var borderColorOver = "#26d314"; 
 
    var borderColorOff = "#7DAFE7"; 
 
    var borderColorOn = "#d40101"; 
 
    var imgClicked = 0; 
 

 
    function heartMouseClick(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOn; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOn; 
 
     imgClicked = 1; 
 
    } else { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
     imgClicked = 0; 
 
    } 
 
    } 
 

 
    function heartMouseOver(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOver; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOver; 
 
    } 
 
    } 
 

 
    function heartMouseOut(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
    } 
 
    }

.pictureBox { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-style: solid; 
 
    border-width: 0px; 
 
} 
 
.images { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.subject { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 5px solid #FFBE00; 
 
}

<body> 
 

 
    <div class="pictureBox"> 
 
    <div class="picture"> 
 
     <img onmouseover="heartMouseOver(0)" onmouseout="heartMouseOut(0)" onclick="heartMouseClick(0)" class="images" border="5" src="photo-1.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 0 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(1)" onmouseout="heartMouseOut(1)" onclick="heartMouseClick(1)" class="images" border="5" src="photo-2.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 1 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(2)" onmouseout="heartMouseOut(2)" onclick="heartMouseClick(2)" class="images" border="5" src="photo-3.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 2 Description 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2016-08-26 Bill Demaria

我很困惑，爲什麼你有3個功能做或多或少同樣的事情。爲什麼不只是讓所有的事件調用相同的功能？ – NewToJS

[非常有趣的僞類]（https://developer.mozilla.org/en-US/docs/Web/CSS/:hover）。 – Teemu

@NewToJS不要這麼幹。你不好玩。 – DanMan

我修改了一些代碼。我將id添加到了dom元素，並將id傳遞給所有方法，而不是對它們進行硬編碼。以下是新代碼的完整內容：

 <!doctype html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 

     <style type="text/css">  
     .pictureBox { 
      width: 300px; 
      height: 300px; 
      border-style: solid; 
      border-width: 0px; 
     }  
     .images { 
      width: 300px; 
      height: 200px; 
     }  
     .subject { 
      width: 300px; 
      height: 100px; 
      border: 5px solid #FFBE00; 
     }  
     </style> 

     </head> 

     <script>  
     var borderColorOver = "#26d314"; 
     var borderColorOff = "#7DAFE7"; 
     var borderColorOn = "#d40101"; 
     var imgClicked = 0; 

     function heartMouseClick(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOn; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOn; 
       imgClicked = 1; 
      } else { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
       imgClicked = 0; 
      } 
     } 
     function heartMouseOver(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOver; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOver; 
      } 
     } 
     function heartMouseOut(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
      } 
     }  
     </script> 


     <body> 

     <div class="pictureBox">  
      <div class="picture"> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="0" onclick = "heartMouseClick(this.id)" class="images" border="5" src="1.jpg">        
      </div>  
      <div class="subject" id="s0" border ="5"> 
       Image 0 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="1" onclick = "heartMouseClick(this.id)" class="images" border="5" src="emergency.jpg">        
      </div>  
      <div class="subject" id="s1" border ="5"> 
       Image 1 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="2" onclick = "heartMouseClick(this.id)" class="images" border="5" src="lebron.jpg">        
      </div>  
      <div class="subject" id="s2" border ="5"> 
       Image 2 Description 
      </div> 
     </div>   

     </body> 
     </html>

您在正確的軌道上，我只是添加了ID並通過了這些。

來源

2016-08-26 17:32:45 BoundForGlory

謝謝@BoundForGlory，真棒你重做的代碼。 –

我的榮幸。我會變得很花哨，並展示如何一次綁定所有事件，但這是一個很好的起點。 – BoundForGlory

既然你已經有了他們的數組反正你可以指定一個新的屬性的圖像對象。例如：

images[heartImg].imgClicked = true;

它可以是一個有點冒險修改內置對象，但如果你選擇一個獨特的足夠屬性名稱，沒有其他的腳本將可能嘗試使用相同的名稱應該是足夠安全。

如果您不能自己將自己的屬性添加到圖像對象，另一種方法是將imgClicked屬性存儲在相關DOM元素的自定義數據屬性中。

來源

2016-08-26 17:30:23 DLH

您可以爲每個img元素分配唯一的ID（ID），然後可以使用數組功能來照顧每個圖像。或者試試這個：

<img id="image1101" src="image1.jpg" onclick="myFunction(this.id)" />

這將以「id」作爲參數激活名爲myFunction（）的函數。

然後你就可以在你的JavaScript中使用此爲：

<script type="text/javascript"> 

      function myFunction(image_id){ 
       // use your funcitons here such as 
       // document.getElementById(image_id).style; 
       // 
      } 

     </script>

來源

2016-08-26 17:35:10 Saini

Javascript圖片onclick

回答

相關問題