JQuery製作Button点击改变CSS及使用data绑定资料

1.点击按钮改变背景色及文字

HTML写入Button

  <h3>点击按钮改变背景色及文字</h3>  <div class="buybtn">点击购买</div>  <div class="buybtn">点击购买</div>

CSS写入样式

*{  font-family:微软正黑体;  letter-spacing:1px;  transition-duration:1s;}.buyed{  border:solid 2px black;  background-color:#f24;  color:white;}

使用JS改变文字及颜色

$(".buybtn").click(  function(){    $(this).text("已经购买");         $(this).addClass("buyed");  });

2.点击按钮连动选择物品

HTML写入Button及绑定的data文字

  <div class="selbtn" data-cata="tree">选择物品一</div>  <div class="selbtn" data-cata="flower">选择物品二</div>  <div class="selbtn" data-cata="sea">选择物品三</div>  <h4 class="show_info">以选择物品: 无</h4>  <h4 class="show_cata">以选择种类</h4>

CSS写入样式

.buybtn,.selbtn{  border:solid 2px;  display:inline-block;  padding:10px 20px;}

使用JS的data连动文字

$(".selbtn").click(  function(){       $(".show_info").text($(this).text());         $(".show_cata").text ($(this).attr("data-cata"));  });

範例网址
https://codepen.io/amanda328/pen/zoVgOa

参考教学 吴哲宇