javascript - onclick 不会向单击的 div 添加(或删除)类

Question

我有以下 fiddle : http://jsfiddle.net/mauricederegt/HMkcD/1/

它包含一系列彩色 block (div)，单击 1 查看这些 block 。生成的 HTML 如下所示:

<div id="plane">
<div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div>
<div class="tile tile2" block-id="2" style-id="2" style="left:100px; top:0px"></div>
<div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div>
<div class="tile tile2" block-id="4" style-id="2" style="left:0px; top:100px"></div>
<div class="tile tile1" block-id="5" style-id="1" style="left:100px; top:100px"></div>
<div class="tile tile2" block-id="6" style-id="2" style="left:200px; top:100px"></div>
<div class="tile tile1" block-id="7" style-id="1" style="left:0px; top:200px"></div>
<div class="tile tile2" block-id="8" style-id="2" style="left:100px; top:200px"></div>
<div class="tile tile1" block-id="9" style-id="1" style="left:200px; top:200px"></div>
<div class="tile tile3" block-id="10" style-id="3" style="left:50px; top:50px"></div><div class="tile tile4" block-id="11" style-id="4" style="left:150px; top:50px"></div>
<div class="tile tile4" block-id="12" style-id="4" style="left:50px; top:150px"></div>
<div class="tile tile3" block-id="13" style-id="3" style="left:150px; top:150px"></div>
</div>

我想添加一个类ss当我点击一个 block 时到一个彩色 block /div；该单击的 block 将成为选定的 block 。然后我想点击选择另一个 block 。如果这两个 block 的 style-id 相同，我想删除这些 block 。如果没有，则删除 ss又上课了。

我创建了以下代码来执行此操作:

$('#plane').click(function(){                            //the click function
    var clickedBlock = $(this);                          //get the data of the clicked div/block
    clickedBlock.addClass('ss');                         //add class ss to the clicked div/block
    if (blockSelected) {                                 //if div/block is selected
       if ($(blockSelected).attr('block-id') == clickedBlock.attr('block-id')) {  //if block-id of the selected div equals the block-id of the clicked div
           clickedBlock.removeClass('ss');               //remove class ss
       } else {                                          //else
          if ($(blockSelected).attr('style-id') == clickedBlock.attr('style-id')) { //if style selected div equals style clicked div
              $(blockSelected).addClass('x');            //ad class x to selected div or better: remove div
              clickedBlock.addClass('x');                //ad class x to clicked div or better: remove div
              totalTiles = totalTiles - 2;               //deduct 2 of the total tiles
               } else {                                  //if not equal styles
              $(blockSelected).removeClass('ss');        //remove class ss form the selected div
              clickedBlock.removeClass('ss');            //remove class ss from the clicked div
           }
        }
        blockSelected = null;
   } else {
        blockSelected = this;
   }
});

问题是，我无法让它工作。我认为#plane一开始也不正确，但我不确定从 #plane div 开始要放什么代码似乎不起作用。

谢谢!

Answer 1

我想我已经让它做你想做的事了。

我改变了你的 fiddle 。在使用 el.innerHTML = html.join(''); 创建 plane 的 HTML 之后，我添加了以下内容:

         $(el).find('.tile').click(function () {
                //get the data of the clicked div/block
                var clickedBlock = $(this); 
                //add class ss to the clicked div/block
                clickedBlock.addClass('ss'); 
                if (blockSelected) { 
                    //if div/block is selected
                    if ($(blockSelected).attr('block-id') == clickedBlock.attr('block-id')) { 
                        //if block-id of the selected div equals the block-id of the clicked div
                        //remove class ss
                        clickedBlock.removeClass('ss'); 
                    } else { //else
                        if ($(blockSelected).attr('style-id') == clickedBlock.attr('style-id')) { 
                            //if style selected div equals style clicked div
                            //ad class x to selected div or better: remove div
                            $(blockSelected).remove(); 
                            //ad class x to clicked div or better: remove div
                            clickedBlock.remove(); 
                            //deduct 2 of the total tiles
                            totalTiles = totalTiles - 2; 
                        } else { //if not equal styles
                            //remove class ss form the selected div
                            $(blockSelected).removeClass('ss'); 
                            //remove class ss from the clicked div
                            clickedBlock.removeClass('ss'); 
                        }
                    }
                    blockSelected = null;
                } else {
                    blockSelected = this;
                }
            });

现在，当您单击两个具有相同 sytle-id 的 block 时，它们将被删除。当您单击第一个 block ，然后单击一个不匹配的 block 时，样式将被删除。

I think that is what you wanted .