jQuery addClass example

Change class name on click in jQuery

by kabanoki

HTML

<div class="usces_admin">

<h1>Welcart Shop ホーム</h1>
<p class="version_info">Version 1.9.26.2001301</p>

<div class="usces_admin_right">

<div class="usces_side_box">
<h5></h5>
<div class="dispmode Usualsale"></div>
</div>

<div id="wc_information" class="chui"></div>

</div><!--usces_admin_right-->

<div class="usces_admin_left">

<h4>受注数・金額</h4>
<div class="usces_box">
<table class="dashboard">
<tbody><tr>
<th>通貨 : 円</th><th>受注数 </th><th>受注金額</th>
</tr>
<tr>
<td>今日 : </td><td class="bignum">0</td><td class="bignum">¥0</td>
</tr>
<tr>
<td>今月 : </td><td class="bignum">0</td><td class="bignum">¥0</td>
</tr>
<tr>
<td>昨年同月 : </td><td class="bignum">0</td><td class="bignum">¥0</td>
</tr>
</tbody></table>
</div>

<h4>商品登録情報</h4>
<div class="usces_box">
<table class="dashboard">
<tbody><tr>
<th>商品数</th><th colspan="5">SKU総数</th>
</tr>
<tr>
<td rowspan="3" class="bignum">7</td><td colspan="5" class="bignum">8</td>
</tr>
<tr>
<th>在庫有り</th>
<th>在庫僅少</th>
<th>売り切れ</th>
<th>入荷待ち</th>
<th>廃盤</th>
</tr>
<tr>
<td class="bignum">8</td>
<td class="bignum">0</td>
<td class="bignum">0</td>
<td class="bignum">0</td>
<td class="bignum">0</td>
</tr>
<tr>
<th colspan="6">在庫数 0 の商品一覧</th>
</tr>
</tbody></table>
</div>


<h4>ご利用の環境</h4>
<div class="usces_box">
<table class="dashboard">
<tbody><tr>
<th>&nbsp;</th><th colspan="2">ソフトウェア・バージョン</th>
</tr>
<tr>
<td>サーバー</td><td colspan="2">Apache/2.2.15 (CentOS)</td>
</tr>
<tr>
<td>MySQL</td><td colspan="2">5.7.13</td>
</tr>
<tr>
<td>PHP</td><td colspan="2">5.6.22 memory[global]:128M [locale]:256M [usage]:17M<br>
simplexml,&nbsp;curl,&nbsp;gd,&nbsp;json,&nbsp;mbstring,&nbsp;mysql,&nbsp;openssl</td>
</tr>
</tbody></table>
</div>
</div>
<!--usces_admin_left-->
</div>

CSS

.usces_admin .usces_admin_left h4:nth-child(1),
.usces_admin .usces_admin_left .usces_box:nth-of-type(1)
{
  display:none;
}


body {
  padding: 20px;
  font-family: Helvetica;
}

th, td {
  border:1px solid #ddd;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})