javascript - 在彩色背景上滴

我将如何更改以下代码，以使只有黄色背景的单元格才可放置？

有没有一种简单的方法可以做到这一点，还是我必须重新编码整个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", "");
});

最佳答案

您有不同的方法来实现此目的：

精简版

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

使用过滤器

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

使用查找：

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

关于javascript - 在彩色背景上滴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13756254/