[英]Select only one selectable with jQueryUI
I have a serialized selectable, and I want a function to make it only select one list item at a time. 我有一个序列化的selectable,我想要一个函数使其一次只选择一个列表项。 I believe I have the right code, but it's not working.
我相信我有正确的代码,但是没有用。 Anyone know why?
有人知道为什么吗?
Here is my javascript: 这是我的JavaScript:
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
$("#selectable").selectable({
selected: function(event, ui) {
$(ui.selected).siblings().removeClass("ui-selected");
}
});
My selectable from the html is below. 我可以从html中选择以下内容。 Perhaps there is a problem due to the elements nested in the
<li>
tags? 由于
<li>
标记中嵌套的元素,可能存在问题吗?
<ul id="selectable">
<li><a><img src="images/CacheMenuGoogleCache2.png", alt="Google Cache" class="button" id="Google Cache" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuBingCache2.png", alt="Bing Cache" class="button" id="Bing Cache" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuYahooCache2.png", alt="Yahoo Cache" class="button" id="Yahoo Cache" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuWaybackMachine2.png", alt="WayBack Machine" class="button" id="WayBack Machine" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuCoralCDN2.png", alt="CoralCDN" class="button" id="CoralCDN" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuGigablast2.png", alt="Gigablast" class="button" id="Gigablast" height ="34px" /></a></li>
<li><a><img src="images/CacheMenuWebCite2.png", alt="Webcite" class="button" id="Webcite" height ="34px" /></a></li>
</ul>
I appreciate your time and your help! 感谢您的时间和帮助!
Okay, I found the problem. 好的,我发现了问题。 I needed to include it inside of a function like so:
我需要将其包含在这样的函数中:
$(function() {
$("#selectable").selectable({
selecting: function(event, ui){
if( $(".ui-selected, .ui-selecting").length > 1){
$(ui.selecting).removeClass("ui-selecting");
}
}
});
});
Also, you might notice the function is a little bit different. 另外,您可能会注意到该功能有些不同。 That is because the other function left the images selected.
那是因为另一个功能使图像被选中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.