javascript
1$(function(){
2 $('.box1').on('click',function(){
3 $('.box1').removeClass().addClass('box2');
4 $('.box2').on('click',function(){
5 $('.box2').removeClass().addClass('box3');
6 });
7 });
8});
これでとりあえず
.box1
->.box2
->.box3
となります。
追記
javascript
1$(function(){
2 $('.box1').click(function(){
3 changeBoxNum(1);
4 });
5});
6
7function changeBoxNum(n){
8 $('.box'+n).off("click");
9 $('.box'+n).removeClass().addClass('box'+(n+1));
10 $('.box'+(n+1)).click(function(){
11 changeBoxNum(n+1);
12 });
13}
これで無制限に変更できます。
jsfiddle
※このデモでは7
までくると1
に戻るようになっています。
追記2
今までの話を踏まえて全体的に作り直してみました。
javascript
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>boxN</title>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<style>
8.bx {
9 width: 100px;
10 height: 100px;
11 margin: 10px;
12}
13
14.wrapper{
15 display: -webkit-box;
16 display: -moz-box;
17}
18
19.box1{
20 background: red;
21}
22
23.box2{
24 background: orange;
25}
26
27.box3{
28 background: yellow;
29}
30
31.box4{
32 background: green;
33}
34
35.box5{
36 background: aqua;
37}
38
39.box6{
40 background: blue;
41}
42
43.box7{
44 background: purple;
45}
46</style>
47<script>
48$(function(){
49 // 初期化 全ての.bxにイベント付与
50 // click.chn -> changeBoxNumに関するclickイベントであることを明記 意味は無いかも。。(^ ^;
51 $('.bx').one('click.chn',function(e){
52 var clsNames = $(e.target).attr('class').split(' ');
53 var n = 1;
54 clsNames.forEach(function(val,ind,arr){
55 if(val.indexOf('box') != -1) n = parseInt(val.split('box')[1]);
56 });
57 changeBoxNum(n,e.target);
58 });
59});
60
61function changeBoxNum(n,et){
62 if(n<7){
63 $(et).removeClass('box'+n).addClass('box'+(n+1));
64 $(et).one('click.chn',function(e){
65 changeBoxNum(n+1,e.target);
66 });
67 }else{
68 $(et).removeClass('box7').addClass('box1');
69 $(et).one('click.chn',function(e){
70 changeBoxNum(1,e.target);
71 });
72 }
73}
74</script>
75</head>
76<body>
77<div class="wrapper">
78 <div class="bx box1"></div>
79 <div class="bx box2"></div>
80 <div class="bx box3"></div>
81 <div class="bx box4"></div>
82 <div class="bx box5"></div>
83 <div class="bx box6"></div>
84 <div class="bx box7"></div>
85</div>
86<div class="wrapper">
87 <div class="bx box1"></div>
88 <div class="bx box2"></div>
89 <div class="bx box3"></div>
90 <div class="bx box4"></div>
91 <div class="bx box5"></div>
92 <div class="bx box6"></div>
93 <div class="bx box7"></div>
94</div>
95<div class="wrapper">
96 <div class="bx box1"></div>
97 <div class="bx box2"></div>
98 <div class="bx box3"></div>
99 <div class="bx box4"></div>
100 <div class="bx box5"></div>
101 <div class="bx box6"></div>
102 <div class="bx box7"></div>
103</div>
104</body>
105</html>
jsfiddle
これで互いに影響を及ぼすことは無いはずです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/04 14:15
2017/10/04 17:28