Question

我想知道我是否能得到一些帮助。（首先，我要道歉..请原谅我的英语不好......）我正在尝试制作一款游戏，为游戏玩家提供多种选择。总有两个正确的选择。我想知道如何通过鼠标单击（不是Ctrl +单击）让玩家有机会选择第二个（或第三个）选项，并通过单击它取消选择其中一个选项（再次不是Ctrl +单击）我尝试了一些我读过的东西，比如e.metakey = false，但是我害怕我不明白它的全部意义，所以我可能用错了方法：S

$('.option').bind("mousedown", function (e){
    e.metaKey = false;
});
$('.option').selectable({
    selecting:function(event, ui){
        $(this).attr('isSelected','True');
    },
    selected: function(event, ui){
        $(this).animate({
            opacity: 0.50,
            backgroundColor: "red"
        }, 500);
    },
    unselecting: function(event, ui){
        if ($(this).attr('isSelected') == 'True'{
            $(this).attr('isSelected','False');
        };
    },
    unselected: function(event, ui){
        $(this).animate( {
            opacity:1,
            backgroundColor: 'orange'
        }, 500);
    }
});

有谁知道我能做到这一点的正确方法？（如果我在e.metaKey找到更好的解释，我会很高兴的）任何信息都会非常有用！：）

谢谢！

HTML：

<div id="choices">
<div class="option_holder_big option ui-selectable masonry-brick" number="8">
    <div class="draggable ui-selectee" number="8">
        <div class="option_square ui-selectee">...</div>
        //...
    </div>
</div>
<div class="option_holder option ui-selectable" number="2">
    <div class="option_square draggable ui-selectee" number="2">...</div>
</div>
<div class="option_holder option ui-selectable" number="3">
    <div class="option_square draggable ui-selected" number="3">...</div>//selected one
</div>
<div class="option_holder_big option ui-selectable" number="6">
    <div class="draggable ui-selectee" number="6">
        <div class="option_square ui-selectee">...</div>
        <div class="option_square ui-selectee">...</div>
    </div>
</div>

我在选择number = 3的选项后添加了部分html代码。（例如）这就是你需要的，@ AndrewPeacock？ PS /我注意到不是“选项”div，而是内部人员得到了“ui-selected”类 - 我猜这是正常的......

Answer 1

我找到了解决问题的方法。首先，我应该让我的外部（'＃choices'）div可选择，以便允许选择内部div（'。option'）。其次，e.metakey可以解决Ctrl-problem，但不是方式我用过它。我可能也没有很好地解释这个问题 - 抱歉。所以，我真的很感谢那些发布答案并试图帮助我的人。非常感谢！：）

我正在给你代码的工作副本，以防它对某人有用......

$("#choices").bind("mousedown", function( e ) {
    e.metaKey = true;
}).selectable({
    filter: "div.option",
    selected:function(event, ui){
        ...
    },
    unselected:function(event, ui){
        ...
    } 
});

Answer 2

查看您正在使用的HTML会有所帮助，但首先会出现一些问题。这段代码什么都不做：

$('.option').bind("mousedown", function (e){
    e.metaKey = false;
});

确实设置了e.metaKey，但它没有做任何事情。

在下一段代码中，您可以尝试设置metaKey标志，但我不认为它会做任何事情，因为jQuery UI（我假设你使用的是jQuery UI顺便说一句）只提供这个回调函数，不期望任何返回值。

$('.option').selectable({
    selecting:function(event, ui){
        event.metaKey = false; // does this really do something?
        $(this).attr('isSelected','True');
    },
    selected: function(event, ui){
        event.metaKey = false; // does this really do something?
        $(this).animate({
            opacity: 0.50,
            backgroundColor: "red"
        }, 500);
    },
    unselecting: function(event, ui){
        event.metaKey = false; // does this really do something?
        if ($(this).attr('isSelected') == 'True'{
            $(this).attr('isSelected','False');
        };
    },
    unselected: function uns(event, ui){ // syntax error
        event.metaKey = false; // does this really do something?
        $(this).animate( {
            opacity:1,
            backgroundColor: 'orange'
        }, 500);
    }
});

所以我们无法真正回答您的问题，直到您分享一些HTML或jsFiddle上的代码演示才是理想的。

jquery UI：如何在不使用Ctrl +单击的情况下取消选择可选元素

2 个答案: