如何从数组中提取图像并放入列表中

Question

我有下拉列表

<select id="animal">
<option>Choose animal </option>
<option value="1">animal 1 </option>
<option value="2">animal 2</option>
<option value="3">animal 3 </option>
</select>

以及图像源的二维数组：

var pictureList = [
    ["images/img1.jpg","images/img2.jpg"],
    ["images/img3.jpg","images/img4.jpg", "images/img5.jpg"],
    ["images/img6.jpg"]
];

我无法创建一个脚本来从数组中提取图像并将它们插入到一个图像列表中。例如，如果我选择“动物 1”选项，我会得到

 <ul id="slider"> 
  <li><img class="imageClass" src="images/img1.jpg"/></li>
  <li><img class="imageClass" src="images/img2.jpg"/></li>       
 <ul>

对于“动物2”

  <ul id="slider"> 
   <li><img class="imageClass" src="images/img3.jpg"/></li>
   <li><img class="imageClass" src="images/img4.jpg"/></li> 
   <li><img class="imageClass" src="images/img5.jpg"/></li>      
  <ul>

Answer 1

改写你的要求：

您需要选择一种动物，然后在屏幕上打印与该动物相关的图像列表。

您只需要获取所选动物的值并查询数组中的相应位置并使用该数组打印 HTML。 I wrote this plunkr for you:

$('#animal').change(function () {
    var animalImages = pictureList[$(this).val() - 1];

    $('#slider').html('');
    for (var i = 0; i < animalImages.length; i++) {
      $('#slider').append('<li><img class="imageClass" src="' + animalImages[i] + '" /></li>');
    }
});

我没有运行

Answer 2

您必须在二维数组上运行循环。您可以执行以下操作：

for(var i = 0; i < pictureList.length; i++) {
    var picSecond = pictureList[i];
    for(var j = 0; j < picSecond.length; j++) {
        alert("picSecond[" + i + "][" + j + "] = " + picSecond[j]);
    }
}

在您的选择框上，创建一个 onChange 事件并调用一个方法。所选选项的值应在 onChange 事件中传递。您可以使用上面的循环通过轻松调整代码轻松地从数组中获取第 n 个元素。

现在您可以创建一个方法来动态创建您的 img 标签，并将 src 属性作为数组中的 picSecond[j] 值。

Answer 3

这是您需要的 javascript 代码， 你只需要jquery

pictureList[$( "#animal" ).val()].forEach(function(elm){
  $("#slider").append('<li><img class="imageClass" src="'+elm+'"/></li>')
});

Answer 4

你可以这样试试：

function changeAnimal(val){

document.getElementById('slider').innerHTML = '';
if(val !== ''){

    for(i=0;i<pictureList[val-1].length;i++){

        var li = document.createElement('li');
        var img = document.createElement('img');
        img.src = pictureList[val-1][i];
        li.appendChild(img);            
        document.getElementById('slider').appendChild(li);
    }

}    
}  

FIDDLE EXAMPLE

Answer 5

我已经为您创建了一个有效的 JSFiddle here。

Javascript

var pictureList = [
    ["images/img1.jpg","images/img2.jpg"],
    ["images/img3.jpg","images/img4.jpg", "images/img5.jpg"],
    ["images/img6.jpg"]
];

var elem = document.getElementById("animal");
elem.onchange = function(){
    var slider = document.getElementById("slider");
    slider.innerHTML = "";
    var val = elem.options[elem.selectedIndex].value;
    for (var key in pictureList[val-1]){
        var newItem = '<li><img class="imageClass" src="'+(pictureList[val-1][key])+'"/></li>';
        slider.innerHTML += newItem;
    }
};

HTML

<select id="animal">
    <option>Choose animal </option>
    <option value="1">animal 1 </option>
    <option value="2">animal 2</option>
    <option value="3">animal 3 </option>
</select>

<ul id="slider"></ul>