jquery - jquery UI: Ctrl+クリックを使用せずに選択可能な要素の選択を解除する方法

Question

何か助けてもらえないだろうかと考えていました。(まず最初に、お詫び申し上げます。下手な英語をお許しください...) 私は、プレイヤーが選択できるいくつかのオプションをプレイヤーに提供するゲームを作ろうとしています。常に 2 つの正しいオプションがあります。マウスをクリックして（Ctrl +クリックではなく）2番目（または3番目）のオプションを選択し、選択したオプションの1つをクリックするだけで選択を解除する機会をプレイヤーに与える方法を知りたいです（これも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 ではなく、内側の div が「ui-selected」クラスを取得していることに気付きました。これは正常だと思います...

Answer 1

問題の解決策を見つけました。まず、内側の div('.option') を選択できるようにするために、outer('#choices')div を選択可能にする必要がありました。使いました。私もおそらく問題をうまく説明できていませんでした-申し訳ありません。だから、回答を投稿して私を助けようとしてくれた人たちに本当に感謝しています。どうもありがとう！:)

誰かに役立つ場合に備えて、コードの作業コピーを提供しています...

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

Answer 2