Question

嘿我正在尝试创建一个函数，如果图像数组的名称与所选元素的数据属性匹配，则会创建警报。在我推进实际计划之前，这只是一个测试，但我被困在这里。我的困惑是双重的。

注意：抱歉，我是javascript的新手，请耐心等待。

1）如何将数组名称与var？

进行比较

2）如何搜索所有存在的数组，是否需要制作嵌套数组或其他函数？ IDK的

我的网页有一定数量的模态图像，点击后会打开幻灯片图像相册。我得到这个工作1张图像，然后意识到，如果它有一定数量的不确定大小的幻灯片，我应该做一个填充幻灯片div的功能。我计划让每个模态图像都具有“1,2,3 ...等”的数据属性，并且有一堆数组，每个图像的命名类似于“1,2,3 ...等”，如果是两者的名称匹配，然后它将使用数组中的图像填充幻灯片。这种方式如果我需要添加另一个模态图像，我需要做的是给它适当的id并添加其图像的数组。我希望这很清楚，如果没有，那么我会提供更多的澄清。

HTML：

<div class="row">
  <div class="column">
    <img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="/*openModal();currentSlide(1);*/ fillSlides(this);" class="hover-shadow cursor">
  </div>
</div>

使用Javascript：

 function fillSlides(modalID){
    var slides_1 = ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ];
 var slides_2 = ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ];
var slides_3 = ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ];

    var modal_num = modalID.getAttribute('data-modal');
    alert(modal_num);

    }

Answer 1

您应该使用将所需数据映射到图像数组的对象：

var slides = {
    "1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
    "2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
    "3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
};

然后，您可以使用slides[modal_num]获取所点击图像的幻灯片。

搜索许多数组以查看是否有任何名称与另一个变量匹配？

1 个答案: