1.預先放置的圖片按鈕
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<img src="PASA002.png" id="imgOnclick">//html的圖片設置，這裡還沒有按鈕的功能
<p id="text">點擊上圖</p>
<script type="text/javascript">
$("#imgOnclick").click(function () {//加入click的功能，點擊後改變text的文字
$("#text").text("成功!");
});
</script>
</head>
</html>
2.動態新增的圖片按鈕
動態新增的物件動作要用.on()來實作，$("父物件").on("動作","作用物件",function(){});
下面的範例是把img新增在showpic裡
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<div id="showpic"></div>
<p id="text"></p>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#showpic").on("click", "#imgOnclick", function () {
$("#text").text("成功!");
});
});
function myFunction() {
$("#showpic").append("<img src='PASA002.png' id='imgOnclick'>");
}
</script>
如果您喜歡我的文章，請在文章最末按5下Like!
我將得到LikeCoin的回饋:)
回饋由LikeCoin基金會出資，您只要註冊/登入帳號(FB、Google帳號都可以註冊，流程超快)，按L五次左鍵，可以贊助我的文章且完全不會花到錢！
支持創作，正向交流:)
沒有留言:
張貼留言