Question

我有一个拖放，我想隐藏掉落的图像。我遇到的问题是图像都具有相同的class并隐藏class滴隐藏所有图像，包括那些尚未被删除的图像。我已经尝试了$(this).Hide();但是这隐藏了droppabble而不是拖动的图像。

图片代码：

 using (The_Factory.Models.The_FactoryDBContext db2 = new The_Factory.Models.The_FactoryDBContext())
                {

                    string imageSource = "";

                    av = db2.Letter_Activity.ToList().FirstOrDefault(a => a.name == qs);

                    for (int i = 0; i < 4; i++)
                    {

                        if (av != null)
                        {
                            string imageBase = Convert.ToBase64String(av.image);
                            imageSource = string.Format("data:image/gif;base64,{0}", imageBase);


                            <img src="@imageSource" class="draggable correct" id="@av.name"/>

                        }
                    }
                }

这是我的droppable的代码

$("#droppable").droppable({
        accept: '.correct',
        drop: function (event, ui) {
            $(".correct").hide();
    });

    $("#playAgain").click(function () {
        location.reload(true);
    });
});

Answer 1

在元素被droped时为它添加一个类。

server.use(express.static(__dirname + "/scripts/src/data"))
//other routes

在css

中隐藏.dropped类可能会更好

$("#droppable").droppable({
        accept: '.correct',
        drop: function (event, ui) {
            $(this).addClass("dropped");
            $(".dropped").hide();
    });

    $("#playAgain").click(function () {
        location.reload(true);
    });
});

Answer 2

可以通过ui参数ui.draggable访问拖动的元素。

$("#droppable").droppable({
        accept: '.correct',
        drop: function (event, ui) {
            ui.draggable.hide();  // hide the element dragged...
    });

    $("#playAgain").click(function () {
        location.reload(true);
    });
});

隐藏掉落的元素

2 个答案: