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");时，我可以替换字段中的pions，但它会选择我点击的所有pions。因此，一个位置将有2个pions（如果我再次尝试，则会有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

我会做这样的事情：

单独绑定点击事件
使所选对象成为全局
只有在coord为空时才添加pion（不需要绑定和取消绑定）

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

取消选择单击的对象

1 个答案: