jquery的用戶界面：如何取消選擇一個可選擇的元素，而無需使用Ctrl +點擊

我想知道我是否可以得到一些幫助。（首先，我想道歉..請原諒我的英語不好......）我想製作一個遊戲，讓玩家可以從中選擇幾個選項。總是有兩個正確的選項。我想知道如何讓玩家有機會通過點擊鼠標（不按Ctrl +單擊）來選擇第二個（或第三個）選項，並通過單擊它來取消選擇其中一個選項（再次不按Ctrl +單擊）我嘗試了一些事情，我瞭解，像e.metakey = false，但是我怕我不明白它的整點，因此可我用了錯誤的方式：Sjquery的用戶界面：如何取消選擇一個可選擇的元素，而無需使用Ctrl +點擊

$('.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>

我跟= 3已經被選擇號碼選項後添加HTML代碼的部分（作爲一個例子）是，你需要什麼，@AndrewPeacock ？ PS /我注意到，不是「選項」的div，但內部的一個得到了「UI選擇」類 - 我想這是正常的...

來源

2012-06-14 barrtin

能否請您發佈與選擇按鈕的HTML？ –

我添加了一些代碼到原始帖子:)我希望這就是你需要的，@AndrewPeacock 並感謝您的幫助！ – barrtin

好的，還有兩件事......是原始代碼工作？我認爲jQuery UI可選只能用於列表而不能用div。你現在可以添加CSS嗎？我用這個jsFiddle開始了你 - 它有jQuery，jQuery UI和一個jQuery UI主題。請使其正常工作，然後我們可以幫助解決問題：http：// jsfiddle。淨/ Mottie/TpHtM/ – Mottie

這將有助於看到您使用的HTML，但第一有幾個問題。下面這段代碼什麼也不做：

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

那麼它的作用是設定e.metaKey，但隨後它與它無關。

在代碼的下位，你可以嘗試設置metaKey標誌，但我不認爲它會做任何事情，因爲jQuery用戶界面（我假設你正在使用BTW 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演示將是理想的。

來源

2012-06-14 16:03:45 Mottie

我添加了一些代碼到原始帖子:)我希望這就是你需要:)謝謝你幫助我！ – barrtin

我找到了解決我的問題的方法。首先，我應該讓我的外部（'＃choices'）div可選，以允許選擇內部div（'。option'）。其次，e.metakey可以解決Ctrl問題，但不能解決問題。我用它。我可能也沒有很好地解釋這個問題 - 對此感到抱歉。因此，我非常感謝那些發佈答案並試圖幫助我的人。非常感謝！ :)

我給你以防萬一它是有用的人我的代碼的工作副本...

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

來源

2012-06-15 08:22:03 barrtin

jquery的用戶界面：如何取消選擇一個可選擇的元素，而無需使用Ctrl +點擊

回答

相關問題