使用 jQuery 取消选择选定区域
Deselect a selected area with jQuery
我有以下 HTML:
<div class="folders block">
<div class="ui-widget-content">
<table class="folders-list">
<tbody class="folder">
<tr><td style="text-align: center">Папки: </td></tr>
<tr class="folder-name"><td><i class="fa fa-folder-open"></i><span>Всички</span></td></tr>
</tbody>
</table>
</div>
</div>
以及以下 jQuery:
$(".folder").selectable({
stop: function() {
$(".ui-selected", this)
.each(function() {
var index = $("table tbody").index(this);
});
}
});
当我想取消选择所选项目时,一切都很好接受。无论我在哪里点击,什么都不会发生。我没有找到任何可以提供帮助的东西。
如果我理解正确,没有直接的方法可以做到这一点,但您可以使用技巧。
当用户单击容器(.folder
)外的某个位置时,您应该做两件事:
- 删除选定项的
.ui-selected
类。 - 清除小组件实例的选定列表。
注意:这是一个通用解决方案,所以它可能会与您的其他代码(例如$('html').click
)冲突,所以要小心。
到代码:
$( "#selectable" ).selectable().click(function(event) {
event.stopPropagation();
});
$('html').click(function(){
var ins = $( "#selectable" ).selectable( "instance" );
// clear the selected list
ins.selectees = [];
// remove the selected class
ins.element.find('.ui-selected').removeClass('ui-selected');
});
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
相关文章:
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 大写--文本区域中的文本选择
- 如何使用JavaScript/jQuery选择图像的多边形区域
- JavaScript 在更改选择时不显示文本区域
- Javascript:Unicode符号选择器(用于将数学符号添加到文本区域)
- jQuery:将“CTRL+A”绑定为仅选择特定区域
- 如何在文件打开和调用图像区域选择时获取原始图像大小
- 通过 NG 单击选择文件或文本区域数据
- 用于根据用户改变文本区域的字体颜色的JavaScript'的选择
- 使用选择框中的值更新文本区域
- 使用jQuery只选择SVG地图上的一个区域
- 在HTML中记住用户区域设置选择的最简单方法
- 缩小后的大图像上的Jcrop圆形选择显示预览选择区域中的全尺寸图像
- 传单区域选择在 Internet Explorer 上删除
- 如何解决离子应用程序内的文本区域选择问题
- Arcgis Esri地图:收集区域选择的pictureMarkerSymbols信息
- 点击文本区域选择单选
- 当我的模态窗口关闭时,从图像中删除图像区域选择
- 快速按钮点击会导致按钮下方的区域选择