Question

我正在尝试使用jquery创建一个简单的拖放Web应用程序。

到目前为止所做的一切都是应有的。现在我要做的是在页面上添加一个按钮，这样当点击它时，它将FLIP所选图像，而我根本没有运气。

我创建了一个jsfiddle，您可以自己查看： http://jsfiddle.net/7btkn17q/8/

将书本图像拖放到下面的框中，然后在其中单击一次，您会在其顶部看到一个按钮，表示翻转。

我需要使用该按钮翻转 选定的 图片。

为此我使用了这个：

$('#flip').click(function(e){

    if( $(e.target).closest(".drag").length > 0 ) {
        $(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');


    }

    });

但这对图像没有任何影响。我知道上面的代码不是为了翻转图像。我刚刚创建了该代码作为测试，看看我是否可以通过按钮点击访问图像而没有运气。

有人可以就此提出建议吗？

编辑：

即使我认为这样可行，但事实并非如此，我对它为什么不起作用感到困惑：

    $('#flip').click(function(e){
    if($(e.target).closest(".drag").length > 0 ) {
    $(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
    }       
});

第二次编辑：

我尝试使用remove()函数来查看我是否可以获得img并且有点我可以使其工作但类似于下面的答案，它将删除 ALL < / em> img而不是仅删除选中的：

$(e.target).parent().siblings(".drag" ).find(".img" ).remove();

有没有办法将CSS或remove（）仅应用于selected element？

Answer 1

'。nearest（）'仅沿DOM树向上移动;你需要做这样的事情来定位图像：

$('#flip').click(function(e){
    if( $(e.target).parent().siblings(".drag").length > 0 ) {
    $(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
    }       
});

更新了jsfiddle：http://jsfiddle.net/7btkn17q/9/

Answer 2

选择图像时，可以为其设置类。我们将selected添加到其中。选择其他图像时，我们只需从其他元素中删除selected类，然后将其添加到我们刚刚选择的图像中。

Here's my fiddle

我注意到的另一个问题是，您试图通过更改所选元素的边框来测试它。单击flip按钮时，图像将被取消选中，边框将更改为medium none（请记住，firebug / devtools是您的朋友。）。所以我更改了它以更改outline css属性以查看该按钮的工作原理。

您也可能希望从jQuery 1.6更新，因为使用.on()函数可以更轻松地处理事件。

按钮点击使用jquery翻转图像？

2 个答案: