この前の続きです。jQueryで思うように動きません。

いつもお世話になっています。今やっているjQueryのコードで躓いているのでご教授お願いします。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="test.css">
6<title>Test</title>
7</head>
8<body>
9<div class="masume"></div>
10<div class="masume"></div>
11<div class="masume"></div>
12<div class="masume"><p class="koma"></p></div>
13<div class="masume"></div>
14<div class="masume"></div>
15<div class="masume"></div>
16<div class="masume"><p class="koma"></p></div>
17<div class="masume"></div>
18
19<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
20<script src="test.js"></script>
21</body>
22</html>

css
1html body {
2	margin: 0;
3}
4.masume {
5	float: left;
6	width: 28px;
7	height: 28px;
8	border: solid 1px #000;
9}
10
11.koma {
12	clear: left;
13	background-color: blue;
14	width: 28px;
15	height: 28px;
16	margin: 0;
17}
18
19.droppable {
20	background-color: yellow;
21}

javascript
1$(function(){
2    var $selectedKoma = null;
3    //駒をクリックして選択する 駒が選択状態のときに他の駒をクリックすると選択解除にする
4    $('.koma').on('click', function(){
5        $selectedKoma = $(this);
6         console.log("選択されました。");
7        if ($selectedKoma.hasClass('droppable')) {
8            $selectedKoma.removeClass("droppable");
9            console.log("選択解除しました。");
10        }else {
11            $selectedKoma.addClass("droppable");
12            if($('.droppable').length > 1) {
13                $('.koma').removeClass("droppable");
14                console.log("選択解除しました。");
15            }
16        }
17    });
18    //駒が選択状態のときに駒がない升目をクリックすると駒が移動して選択解除する
19    $(document).on('click', '.masume:not(:has(.koma))', function(){
20        if($('.droppable').length > 0) {
21            $(this).append($selectedKoma);
22            console.log("選択解除しました。");
23            $selectedKoma.removeClass("droppable");
24            $selectedKoma = null;
25        }
26    });
27    //駒が選択状態のときに升目以外のところをクリックすると選択解除する
28    $(document).on('click', function(e){
29        if(!$(e.target).closest('.masume').length) {
30            if($('.droppable').length > 0) {
31                $selectedKoma.removeClass("droppable");
32                console.log("選択解除しました。");
33                $selectedKoma = null;
34            }
35        }
36    });
37});

長ったらしいコードで申し訳ありません。
以上のコードで、駒をマウスでクリックしたら選択状態にしたり選択解除したり、要素を移動させるソフトを作っています。
なんとか動いているのですが、ある要素を選択状態にして、他のkomaクラスをクリックすると、解除されるのですが、同時に「選択しました。」と選択までされてしまいます。当方がやりたいことは、選択状態以外の駒をクリックすると解除だけされるようにしたいです。どうコードを書けば、そのように動くかを教えてください。よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

選択されている駒があるかどうかを判断するとか

      $('.koma').on('click', function(){
          $selectedKoma = $(this);
            var cnt = $('.koma.droppable').length;//こんなのでもOK
            if(cnt < 1){
              console.log("選択されました。");
            }
          if ($selectedKoma.hasClass('droppable')) {
              $selectedKoma.removeClass("droppable");
              console.log("選択解除しました。");
          }else {
              $selectedKoma.addClass("droppable");
              if($('.droppable').length > 1) {
                  $('.koma').removeClass("droppable");
                  console.log("選択解除しました。");
              }
          }
      });

投稿2017/05/08 21:53