Question

所以我有一个简单的表，我可以拖动行。我想要做的是在start和stop函数中更改有关event.target的内容。这在Chrome中很容易使用，因为event.target返回表格行。但是，在Firefox 11（11？那很快）中它返回：

[11：58：22.135] [object XrayWrapper [object HTMLTableRowElement]]

因此，如果我想更改css背景，例如，我该怎么做？

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js">
</script>

<script>
$(document).ready(function(){

    $(".drag").draggable({
        helper: 'clone',
        axis: 'y',
        revert: true,
        start: function(event, ui){
            console.log(event.target);
        },
        stop: function(event, ui){
            console.log(XPCNativeWrapper.unwrap(event.target.style));
        }
    });
});

</script>

<html>

<table>
<tr class="drag">
<td> one </td>
<td> one </td>
<td> one </td>
<td> one </td>
<td> one </td>
</tr>

<tr class="drag">
<td> two </td>
<td> two </td>
<td> two </td>
<td> two </td>
<td> two </td>
</tr>

<tr class="drag">
<td> three </td>
<td> three </td>
<td> three </td>
<td> three </td>
<td> three </td>
</tr>

<tr class="drag">
<td> fourve </td>
<td> fourve </td>
<td> fourve </td>
<td> fourve </td>
<td> fourve </td>
</tr>

<tr class="drag">
<td> six </td>
<td> six </td>
<td> six </td>
<td> six </td>
<td> six </td>
</tr>
</table>
</html>

控制台打印：

[11：58：22.135] [object XrayWrapper [object HTMLTableRowElement]]

[11：58：23.753] [对象XrayWrapper [对象CSSStyleDeclaration]]

请注意，unwrap似乎没有做任何事情（我在Google上找到的几个修复之一）。那么如何解开这个对象或者不将它包装在第一个位置以便我可以搞砸css？

Answer 1

XrayWrapper的目的是为您提供DOM节点的纯粹视图。所以特别是，在它上面获取.style应该完全按照你的预期工作：它返回一个围绕CSSStyleDeclaration的XrayWrapper，并设置它的.background应该改变背景。

Firefox 11中的jQuery draggable返回XrayWrapper

1 个答案: