Javascript圖片onclick函數
[英]Javascript image onclick function
問題描述
我創建了一個javasript代碼以在圖片點擊時執行。 我按如下方式編寫了代碼，但它不起作用，任何人都可以幫我完成這項工作
<!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; } </script> <body> <div class="main"> <div class="container_12"> <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>
4 個解決方案
解決方案1
1 2015-11-25 07:05:18
由於您使用的是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();
});
解決方案2
1 已采納 2015-11-25 08:10:21
這有效
<!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”類的任何內容，並將click函數綁定到該腳本。 如果它在身體之前被加載，它將什么也找不到。
解決方案3
1 2015-11-25 08:31:23
好的，您的問題是因為您無法重命名函數click() 。 與javascript格式沖突。 我有重命名功能， clicks()和我將元素的對象參數與this
點擊次數（本）
現在，我檢查children元素是否具有良好的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; } </script> <body> <div class="main"> <div class="container_12"> <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
解決方案4
0 2015-11-25 07:16:29
您必須使用該img和getElementsByClassName的類，因為有多個具有相同名稱的ID，並且標簽中沒有任何ID，您在img標簽中有本地ID，請在javascript和HTML中更改一些代碼。
使用圖像和 onClick 調用 javascript function 的最佳控制
[英]Best control with image and onClick to call javascript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.