0

我有以下小提琴：http: //jsfiddle.net/mauricederegt/HMkcD/1/

它包含一系列彩色块（div），单击 1 可查看块。生成的 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到一个彩色块/div；此单击的块成为选定的块。然后我想单击以选择另一个块。如果这两个块的样式 ID 相同，我想删除这些块。如果没有，则再次删除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它似乎不起作用。

谢谢！

4

3 回答 3

1

如果您对完全不同的方法感兴趣，请考虑：

var BLOCK_PAIR = (function() {//Singleton NAMESPACE pattern.
    //Private vars
    var blocks = $(),
        delay = 500,
        selClss = 'ss',
        compareAttr = 'style-id',
        disabled = false;

    //Private functions
    var select = function(e) {
        var $b = $(e.target);
        if(disabled) return;
        if( blocks.length == 1 && blocks.not($b).length == 0 ) {
            reset();//allow first block to be deselected
            return;
        }
        if( blocks.length >= 2 ) reset(); //should never happen
        blocks = blocks.add($b.addClass(selClss));
        compare();
    };
    var compare = function() {
        if(blocks.length == 2) {
            if(blocks.eq(0).attr(compareAttr) == blocks.eq(1).attr(compareAttr)) {
                setTimeout(remove, delay);
            }
            else {
                setTimeout(reset, delay);
            }
            disabled = true;//inhibit block selection during timeout delay.
        }
    };
    var remove = function() {
        blocks.remove();
        reset();
    };
    var reset = function() {
        blocks.removeClass(selClss);
        blocks = $();
        disabled = false;
    };

    //Expose private functions as public methods
    return {
        select: select,
    };
})();

$(function() {
    $('#plane').on('click', '.tile', BLOCK_PAIR.select);
});

演示：http: //jsfiddle.net/5NyJw/

于 2013-03-19T01:13:36.570 回答
1

操作，

使用on()@Rodrigo Assis 建议的方法是成功的一半。简而言之，您试图将侦听器附加到在 DOM 加载后创建的元素上——为此，您不能使用直接事件，而是需要使用委托事件。旧方法是live()，此后已被弃用。on()是新标准。更多关于这里

至于您描述的逻辑，我对您的代码进行了一些修改，并对其进行了优化。我很确定这可以通过更简洁的逻辑实现您的要求。下面是概要，这里是更新的 Fiddle

JS

 ...
    var pairs = [];
    $('#plane').on('click', '.tile', function () { 
        $(this).addClass('ss');
        pairs.push($(this));
        if (pairs.length == 2) {
             if ($(pairs[0]).attr('style-id') === $(pairs[1]).attr('style-id') && $(pairs[0]).attr('block-id') != $(pairs[1]).attr('block-id')) {
                $(pairs[0]).remove();
                $(pairs[1]).remove();
                pairs = [];
            } else {
                $(pairs[0]).removeClass('ss');
                $(pairs[1]).removeClass('ss');
                pairs = [];
            }
        }
    });
 ...

简短的

我们想要的基本上是说：

  • 用户点击blockA，突出显示它
  • 用户点击blockB，突出显示它
    • 如果块具有相同的样式 ID，则删除它们
    • 否则，取消突出显示它们

在这种情况下，pairs数组是你的朋友。

哦，另一件事 - 你的原始代码有这个：totalTiles = totalTiles - 2. 我建议将映射totalTiles作为对$('.tile').length. 我查看了您的代码，但似乎无法弄清楚您为什么要降低其价值。

希望能帮助到你。

-编辑-

在app.js 的第 185 行更新了条件，以确保如果同一个块被选中两次，它不会被视为一对。上面固定的小提琴和代码要点。

于 2013-03-18T20:26:33.970 回答
1

我想我有它做你想做的事。

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

         $(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 的两个块时，它们将被删除。当您单击第一个块，然后单击不匹配的块时，样式将被删除。

我想这就是你想要的。

于 2013-03-18T20:31:25.917 回答