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

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。 我为您写了这个plunkr ：

$('#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

您将必须在2D数组上运行循环。 您可以执行以下操作：

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);
    }

}    
}  

例子

Answer 5

我在这里为您创建了一个可工作的JSFiddle。

使用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>