Question

很抱歉这个令人困惑的标题，我希望我能解释一下。

http://thetally.efinancialnews.com/tallyassets/suebanks/suebanks.html

在此示例中，您可以将右侧的红色框拖到左上角的灰色框中，每个红色框都有一个唯一的ID。当这个红色框被放入时，我希望下面的所有黑框都消失，除了CLASS与红色方块的唯一ID匹配的那些。

第一个框的ID为'barclays'，黑色框中有2个，所以那些2应该保留

第二个的ID为lloyds，因此只剩下其中一个黑盒子。

以下是我正在使用的javascript代码：

$(init);
function init() {
    $('.draggable').draggable({
        containment: '#maincontain',
        stack: '.bankbox div',
        cursor: 'move',
        revert: true
    });
    $('.judge').droppable({
        drop: handleDropEvent
    });
}

function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    ui.draggable.position({
        of: $(this),
        my: 'center bottom',
        at: 'center bottom'
    });
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
}

...所以我需要做的是获取警报中显示的'draggable.attr（'id'），然后在handleDropEvent中创建一些内容，说明...隐藏.lawyers div中的所有div，除了那些类等于draggable.attr（'id'）

的人

我已经尝试过将它一起攻击，但没有得到我之后的结果

希望它不会令人困惑，感谢任何建议

Answer 1

未经测试，但您的handleDropEvent应该与此类似......

function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    ui.draggable.position({
        of: $(this),
        my: 'center bottom',
        at: 'center bottom'
    });
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');

    //Add these lines:
    var lawyers = $('.lawyers .lawyer');
    lawyers.not('.'+draggable.attr('id')).hide();
    lawyers.filter('.'+draggable.attr('id')).show();
}

这是一个工作小提琴： http://jsfiddle.net/g30rg3/c3Dt9/1/

Answer 2

查看此页面：

http://api.jqueryui.com/droppable/#event-drop

嗯 - 我通常有一个名为droppable的可放置区域......

认为它会是这样的：

$( ".droppable" ).droppable({
  drop: function( event, ui ) 
{
$( ".blackBox" ).addClass('hideBox');
}

});

然后使用现在将自身附加到blackBox的hideBox类来隐藏??

检查该链接中的信息，但我认为它可能是您需要的。或者将其弹出到codepen中，以便人们可以玩：）

Answer 3

你只需要添加

$('.lawyers').not('.' + draggable.attr('id')).hide();

在ui.draggable.position命令之后。

获取已删除div的ID并隐藏所有其他没有此类的div

3 个答案: