全部,我正在尝试实现可选择的图像列表。以下就是我所做的。 但我有两个问题需要修复,请帮助审查。谢谢。
脚本
function initSelectable() {
$("#layoutol").selectable({
stop : function(event, ui) {
var result = $("#spanSelectedLayout").empty();
$(".ui-selected", this).each(function() {
var index = $("#layoutol li").index(this);
result.append((index + 1));
});
},
selected:function (event,ui){
//prevent the img element selected and multiple selected, the below code not make it .
$(event.target).children('.ui-selected').children('.ui-selected').removeClass('ui-selected');
$(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
}
});
}
HTML
<ol id="layoutol">
<li class="ui-state-default"><img alt="" src="img/A.PNG" /></li>
<li class="ui-state-default"><img alt="" src="img/B.PNG" /></li>
<li class="ui-state-default"><img alt="" src="img/C.PNG" /></li>
<li class="ui-state-default"><img alt="" src="img/D.PNG" /></li>
</ol>
答案 0 :(得分:1)
所有,我找到了一种方式,我所做的就是下面。有更好的方法吗?感谢。
selected:function (event,ui){
$('img',event.target).removeClass('ui-selected');
$(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
}
答案 1 :(得分:1)
我找到了这个。很容易在您的网站上集成: http://rvera.github.io/image-picker/