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

參考教學 吳哲宇