2

所有,我正在尝试实现可选图像列表。下面是我所做的。但是我有两个问题需要解决,请帮助审查它。谢谢。

  1. 我不希望选择 img。
  2. 防止多选。

脚本

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>
4

2 回答 2

1

所有,我找到了一种方法,我所做的如下。有什么更好的办法吗?谢谢。

selected:function (event,ui){
            $('img',event.target).removeClass('ui-selected');
            $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
        }
于 2013-03-06T03:13:25.787 回答
1

我找到了这个。很容易集成到您的网站上: http ://rvera.github.io/image-picker/

于 2013-07-25T04:17:36.750 回答