<html lang="en"> <head> <meta charset="UTF-8"> <title>日考20、jQuery实现课程表</title> <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $(".b1").click(function(){ var b1=$(".b1").text(); $(".kc").append("<span id='s1'>"+b1+"<button class='x1'>x</button></span>") $(".x1").click(function(){ $("span").remove("#s1") }) }) $(".b2").click(function(){ var b2=$(".b2").text(); $(".kc").append("<span id='s2'>"+b2+"<button class='x2'>x</button></span>") $(".x2").click(function(){ $("span").remove("#s2") }) }) $(".b3").click(function(){ var b3=$(".b3").text(); $(".kc").append("<span id='s3'>"+b3+"<button class='x3'>x</button></span>") $(".x3").click(function(){ $("span").remove("#s3") }) }) $(".b4").click(function(){ var b4=$(".b4").text(); $(".kc").append("<span id='s4'>"+b4+"<button class='x4'>x</button></span>") $(".x4").click(function(){ $("span").remove("#s4") }) }) $(".b5").click(function(){ var b5=$(".b5").text(); $(".kc").append("<span id='s5'>"+b5+"<button class='x5'>x</button></span>") $(".x5").click(function(){ $("span").remove("#s5") }) }) }) </script> </head> <body> <div style="width: 100%;height: 200px;background: gainsboro" class="kc"> </div> <button class="b1">英语</button> <button class="b2">数学</button> <button class="b3">语文</button> <button class="b4">美术</button> <button class="b5">体育</button> </body> </html>
jQuery添加课程,有瑕疵
最新推荐文章于 2024-01-10 20:15:18 发布