jquery ui中的可選圖像項目

所有，我試圖實現可選擇的圖像列表。以下是我所做的。但我有兩個問題需要修復，請幫忙查看一下。謝謝。jquery ui中的可選圖像項目

我不想讓img被選中。
防止多重選擇。

腳本

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>

來源

2013-03-06 Joe.wang

我發現這一個。很容易集成在您的網站上： http://rvera.github.io/image-picker/

來源

2013-07-25 04:17:36 softnayr

請發佈與回答問題相關的代碼，而不僅僅是鏈接。 – 2013-07-25 04:38:13

@ArmanH你可以查看鏈接中的代碼。那裏有很多例子。它看起來是貨物。謝謝！ – 2013-07-25 08:20:25

[閱讀「如何回答問題」]（http://stackoverflow.com/help/how-to-answer）：鼓勵與外部資源的鏈接，但請在鏈接的周圍添加上下文，以便您的其他用戶可以有一些想法它是什麼以及它爲什麼在那裏。如果目標網站無法訪問或永久離線，請始終引用重要鏈接中最相關的部分。 – 2013-07-26 18:34:52

好，我找到了一種方法，我做了如下。有什麼更好的辦法嗎？謝謝。

selected:function (event,ui){ 
      $('img',event.target).removeClass('ui-selected'); 
      $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected'); 
     }

來源

2013-03-06 03:13:25

jquery ui中的可選圖像項目

回答

相關問題