javascript - 可放置在彩色背景上

Question

我将如何更改以下代码，以便只有黄色背景的单元格可以删除？

有没有一种简单的方法可以做到这一点，还是我必须重新编码整个 jquery？谢谢。

小提琴：http: //jsfiddle.net/bLb3H/38/

html:

<table border="1" id="tbl">
 <tr>
  <td ></td>
  <td  bgcolor=#000000 ></td>
  <td class="items  p1 p3"><img src="http://icons.iconarchive.com/icons/deleket/soft- scraps/32/Button-Blank-Red-icon.png"/></td>      
</tr>

<tr>      
  <td bgcolor=#000000 ></td>
  <td class="items  p1"></td>
  <td class="items p3" bgcolor=#000000 ></td>
</tr>

<tr>      
  <td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png"></td>
  <td bgcolor=#000000 ></td>
  <td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" ></td>
</tr>

jQuery

$('img').draggable({
});

$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
    $(this).children('img').remove();
    var cell = ui.draggable.appendTo($(this)).css({
        'left': '0',
        'top': '0'
    });

  $('img').draggable('disable');

$("td").each(function() {
var id = $(this).attr("id");
    $("."+id).css("background", "");        
  });

}
});

$(".piece").mouseover(function() {
id = $(this).attr('id');
$("."+id).css("background", "yellow");
}).mouseleave(function() {
id = $(this).attr('id');
$("."+id).css("background", "");       
});

Answer 1

You have different ways to achieve this:

Short version

//All elements with yellow background
$('#tbl td[style*=background-color:yellow]').droppable();

Using filter

$(function() {
    $('#tbl td').filter(function () {
        return $(this).css('background-color') == 'yellow';
    }).droppable();
});

Using find:

jQuery('#tbl').find('td').each(function (){
    if($(this).css('background-color') == 'yellow'){
       // do something like $(this).droppable();
    }
});