Javascript圖像onclick函數

-1

我創建了一個javasript代碼來執行圖像點擊。我寫的代碼如下，但它不工作，任何人都可以幫助我，使這項工作Javascript圖像onclick函數

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
     <title>Untitled</title> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css"> 
 
     <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> 
 
     <script src="js/jquery-1.7.min.js"></script> 
 
     <script src="js/jquery.easing.1.3.js"></script> 
 
     <script src="js/tms-0.4.1.js"></script> 
 
     <script> 
 

 
    function click(){ 
 
    if(a.document.getElementById=="right") 
 
    { 
 
    document.getElementById('aswE').src='http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ; 
 
    } 
 
    else 
 
    { 
 
    document.getElementById('aswE').src='https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ; 
 
    } 
 
    $('img.answr').hide(); 
 
    return false; 
 
    \t } 
 

 
    \t </script> 
 
    \t <body> 
 
     <div class="main"> 
 
    <div class="container_12"> \t 
 
     <table border="0"><tr> 
 
     <td> 
 
     
 
    <img src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" /></td><td><img src="" alt="" name="aswE" width="103" height="99" id="aswE" /> 
 
    </br> 
 
    <a href="#" onclick="click()">  
 
    <img class="answr" src=""http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" /></a> 
 
    <a href="#" onclick="click()">  
 
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/quilted-floral-icons-natural-wonders/053719-quilted-floral-icon-natural-wonders-flower2.png" id="right" width="103" height="99" /></a> 
 
    <a href="#" onclick="click()">  
 
    <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/magic-marker-icons-natural-wonders/115597-magic-marker-icon-natural-wonders-flower17.png" id="wrong" width="103" height="99"/></a> 
 
    <a href="#" onclick="click()">  
 
    <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-chrome-rain-icons-natural-wonders/050122-blue-chrome-rain-icon-natural-wonders-flower17.png" id="wrong" width="103" height="99" /></a> 
 
    <a href="#" onclick="click()">  
 
    <img src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" width="103" height="99"/></a></td></tr></table> 
 

 

 

 
    </div> 
 
       <div class="clear"></div> 
 
      </div> 
 
     </section>  
 
     </div>  
 
    </body> 
 
    </html>

因爲我想這個JavaScript加載關於點擊圖像，當用戶點擊一個又一個圖像圖像所有四個圖像必須隱藏，直到頁面重新加載

來源

2015-11-25 Karthi..

** **的ID應該是唯一的 – ozil

我看到6個圖像標記。 – lordkain

你想要做什麼這個 'if（a.document.getElementById ==「right」）' 這條線什麼也不做 –

這工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>Untitled</title> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 

<body> 

    <img id="aswE" src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" /> 
    </br> 
    <img class="answr" src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" width="103" height="99" /> 
    <img class="answr" id="correct" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/quilted-floral-icons-natural-wonders/053719-quilted-floral-icon-natural-wonders-flower2.png" width="103" height="99" /> 
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/magic-marker-icons-natural-wonders/115597-magic-marker-icon-natural-wonders-flower17.png" width="103" height="99"/> 
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-chrome-rain-icons-natural-wonders/050122-blue-chrome-rain-icon-natural-wonders-flower17.png" width="103" height="99" /> 

</body> 

<script> 
    $('.answr').click(function(){ 
     if ($(this).attr('id') === 'correct') { 
      $('#aswE').attr('src', 'http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png'); 
     } else { 
      $('#aswE').attr('src', 'https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png'); 
     } 

     $('.answr').hide(); 
    }); 
</script> 

</html>

注意：此腳本的版本有來身體已經被加載後，因爲它會尋找與類「answr」任何東西，點擊功能綁定到它。如果它被加載到身體之前，它什麼也找不到。

來源

2015-11-25 08:10:21 com

它的工作原理！謝謝 –

由於您使用的是Jquery，請不要使用document.getElementById（）方法。使用Jquery裏面的選擇器引擎，它具有很好的跨瀏覽器支持。

HTML

<img src="image1.jpg" id="img1"> // make sure ID's are unique 
<img src="image2.jpg" id="img2" style="display:none;">

jQuery的

$('#img1').click(function(){ 
    $('#img2').show(); 
});

Click here to see JSfiddle demo

來源

2015-11-25 07:05:18 magreenberg

你必須使用類爲該IMG和getElementsByClassName方法，因爲有同名的多個ID，並沒有任何的ID在標籤中，您有img標籤中的標識，更改JavaScript和HTML中的某些代碼。

來源

2015-11-25 07:16:29

好的，你的問題是因爲你不能重命名你的功能click()。這與JavaScript格式的衝突。我有你的函數重命名爲clicks()，我將元素的對象參數與this

點擊（本）

，現在我檢查孩子元素有良好的ID。

現在工作。請嘗試

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
     <title>Untitled</title> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/grid_12.css"> 
 
     <link rel="stylesheet" type="text/css" media="screen" href="css/slider.css"> 
 
     <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="js/jquery.easing.1.3.js"></script> 
 
     <script src="js/tms-0.4.1.js"></script> 
 
     <script> 
 

 
    function clicks(s){ 
 

 
    if(s.children[0]=="right") 
 
    { 
 
    document.getElementById('aswE').src='http://icons.iconarchive.com/icons/fasticon/nature/256/White-Flower-icon.png' ; 
 
    } 
 
    else 
 
    { 
 
    document.getElementById('aswE').src='https://cdn3.iconfinder.com/data/icons/flowers-stroke-1/100/flowers_flower_bloom-42-256.png' ; 
 
     
 
    } 
 

 
    $("img.answr").hide(); 
 
    return false; 
 
    \t } 
 

 
    \t </script> 
 
    \t <body> 
 
     <div class="main"> 
 
    <div class="container_12"> \t 
 
     <table border="0"><tr> 
 
     <td> 
 
     
 
    <img src="http://www.bigmomentfilms.com/wp-content/uploads/2015/09/Daisy-flowers.jpg" alt="Elep_ant" border="5" /></td><td><img src="" alt="" name="aswE" width="103" height="99" id="aswE" /> 
 

 
    <a href="#" onclick="clicks(this)">  
 
    <img class="answr" src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" /></a> 
 
    <a href="#" onclick="clicks(this)">  
 
    <img class="answr" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/quilted-floral-icons-natural-wonders/053719-quilted-floral-icon-natural-wonders-flower2.png" id="right" width="103" height="99" /></a> 
 
    <a href="#" onclick="clicks(this)">  
 
    <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/magic-marker-icons-natural-wonders/115597-magic-marker-icon-natural-wonders-flower17.png" id="wrong" width="103" height="99"/></a> 
 
    <a href="#" onclick="clicks(this)">  
 
    <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/blue-chrome-rain-icons-natural-wonders/050122-blue-chrome-rain-icon-natural-wonders-flower17.png" id="wrong" width="103" height="99" /></a> 
 
    <a href="#" onclick="clicks(this)">  
 
    <img src="http://images.all-free-download.com/images/graphiclarge/orange_flower_115.jpg" id="wrong" width="103" height="99"/></a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 

 

 

 
    </div> 
 
       <div class="clear"></div> 
 
      </div> 
 
     </section>  
 
     </div>  
 
    </body> 
 
    </html>

你可以找到更多的細節在這裏保留字：http://www.w3schools.com/js/js_reserved.asp

來源

2015-11-25 08:31:23

它的工作原理！謝謝 –

Javascript圖像onclick函數

回答

相關問題