タイトル通り、複数選択可能なボタンを作ろうと思い作成しました。
とりあえず、ボタンを押したら今押されているボタンのIDを取得して画面に表示させています。
※ 細かいバグがあるかも
■ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<link rel="stylesheet" type="text/css" href="button.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script>
<script src="button.js"></script>
<title>ボタン</title>
</head>
<body>
<div id="list_area" >
<ul style="list-style-type: none">
<!-- ここがボタンになる領域 -->
<li id="id_1" class="list_item">ボタン1</li>
<li id="id_2" class="list_item">ボタン2</li>
<li id="id_3" class="list_item">ボタン3</li>
</ul>
</div>
<div>選択中：<span id="check_item"></span></div>
</body>
</html>
■ button.js
toggleClass を使いたかったんですよね。
$(function()
{
// 定数用
var CHECKED_CLASS = "checked" ;
// 変数用
var
check_array = []
, ltem_count = 0
, for_count = 0
, check_text = ""
, e_target = []
;
$(".list_item").on("click", function(e)
{
e_target = $(e.target) ;
e_target.toggleClass(CHECKED_CLASS) ;
// checked が付加されている項目の id を配列に追加、無い項目は配列から除去
if(e_target.hasClass(CHECKED_CLASS)) {
check_array.push(e_target.attr("id")) ;
} else {
for_count = 0 ;
for(; for_count < ltem_count ; for_count++) {
if(e_target.attr("id") == check_array[for_count]) {
check_array.splice(for_count, 1) ;
}
}
}
// 画面に選択されている項目を表示させる
ltem_count = check_array.length ;
for_count = 0 ;
check_text = "" ;
for(; for_count < ltem_count ; for_count++) {
// 最初の一つ目以外は前に , をつけて区切る
if(for_count !== 0) check_text += ", " ;
check_text += check_array[for_count] ;
}
$("#check_item").text(check_text) ;
})
})
■ button.css
hover は辞めました。
@CHARSET "UTF-8" ;
.list_item
{
margin : 2px ;
padding : 5px 10px 5px 10px ;
border-radius : 10px ;
text-align : center ;
background : #DDDDDD ;
display : inline-block ;
}
.list_item:active
{
background : #555555 ;
}
.checked
{
color : #FFFFFF ;
background : #888888 ;
}
そういえば、 jQuery が 3.1.1 にバージョンアップしましたね(今更)
