jQuery的圖片選擇器 - 選擇多個圖像編程

Question

我使用jQuery庫圖片選擇器 https://rvera.github.io/image-picker/

讓我們假設我有相同的設置這樣的：

<select class="image-picker" multiple="multiple"> 
    <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option> 
    <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option> 
    <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option> 
    <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option> 
</select> 

我可以選擇單個圖像編程像那

$(".image-picker").val("1"); 
$(".image-picker").data('picker').sync_picker_with_select(); 

在這種情況下，第一個圖像將被選中。如果我選擇圖像的值爲1和4，該怎麼辦？我曾嘗試過：

$(".image-picker").val(["1","4"]); 
$(".image-picker").data('picker').sync_picker_with_select(); 

但這不起作用。

任何幫助將不勝感激。

Answer 1

它的工作：

$(function() { 
 
    $(".image-picker").imagepicker(); 
 
    $(".image-picker").val(["1", "4"]); 
 
    $(".image-picker").data('picker').sync_picker_with_select(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.0/image-picker.min.css" rel="stylesheet"/> 
 
<select class="image-picker" multiple="multiple"> 
 
    <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option> 
 
    <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option> 
 
    <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option> 
 
    <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option> 
 
</select>

Answer 2

您想獲取選擇列表中的所有圖像對象。由於您使用的是自定義的data-元素，因此jQuery選擇器有點笨拙：select option[data-img-src]。然後找出你有（以下imgCount）有多少圖像對象，並在該數組運行的相應長度的循環：

// 1- Put all img assets into an array using jQuery toArray() 
var imgArray = $("select option[data-img-src]").toArray(); 

// 2- Get number of image assets 
var imgCount = imgArray.length; 

// 3- Loop through array, limit to number of total objects in array 
for (var i=0; i <= imgCount; i++) { 

    //4- Do whatever you want with imgArray here 

}