Отмена выбора объекта

Question

var infoOnClick = { 
     selected: 0, 
    }; 

    $(".pion").click(function() { 

     if(infoOnClick.selected == 0) { 

      infoOnClick.selected = 1; 

      var selected = this; 

      $(selected).toggleClass("box-shadow"); 

      $(".coord").click(function() { 

       $(selected).appendTo(this); 

       $(".coord").unbind("click"); 
       infoOnClick.selected = 0; 

      });  

     } 
     else { 

      $(selected).removeClass("box-shadow"); 
      var selected = NULL; 

     } 
    }); 

У меня есть поле 10 на 10, где я хочу разместить пионы. Сначала я хочу щелкнуть пион, а затем правую координату. Например, я хочу разместить pion P4 в позиции C23. Однако я могу разместить пионы в поле, но я не могу их переместить после их размещения.

Когда я удаляю $(".coord").unbind("click"); Я могу заменить пионы в поле, но он выберет все пионы, которые я нажал. Таким образом, на одной позиции будет 2 пиона (и 3, если я попробую снова и т. Д.).

Кто-нибудь знает, как это исправить?

<table> 

     <?php 

     $player = 'p1'; 

     if($player == 'p1') { 

      $kleur = 'rood'; 
      $player == 1; 
     } 

     if($player == 'p2') { 

      $kleur = 'blauw'; 
      $player == 2; 

     } 

     for ($y = 9; $y >= 0; $y--) { 
      echo '<tr>' 
      . ''; 
      for ($x = 0; $x < 10; $x++) { 
       echo '<td class="coord" id="c' . $x . $y . '"></td>' 
       . ''; 
      } 
      echo'</tr>' 
      . ''; 
     } 

     ?> 


    </table> 

    <div class='pion-venster'> 

     <?php 

     for ($y = 39; $y >= 0; $y--) { 

     echo '<div class="pion ' . $kleur . ' " id="p' . $y . '"></div>'; 

     } 

     ?> 

    </div> 

Answer 1

Я хотел бы сделать что-то вроде этого:

1. свяжи нажмите события отдельно
2. сделать выбранный объект глобальной
3. только добавить пион, если коорд пуст (нет необходимости для связывания и развязывания то)

var selectedItem = null, 
    pions = $(".pion"), 
    coords = $(".coord"); 

$(document).on('click', '.pion', function() { 
    pions.removeClass("box-shadow"); // remove class from any p[reviously selected pion 

    if (selectedItem == $(this)) { 
    selectedItem = null;   // if selected pion is current clicked one, deselect 
    } else { 
    selectedItem = $(this);   // otherwise select 
    selectedItem.addClass("box-shadow"); 
    } 
}); 


coords.click(function() { 
    var currentCoord = $(this); 
    if (selectedItem != null) { // only append selected item if coord is empty 
    if (!currentCoord.children().length) { 
     currentCoord.append(selectedItem); 
    } 

    selectedItem.removeClass("box-shadow"); // deselect 
    selectedItem = null; 
    } 
}); 

Example Fiddle