时间戳

首页 > 解决方案 > 简化 Javascript - 这是数组的情况吗？

javascript - 简化 Javascript - 这是数组的情况吗？

问题描述

我对整个 JS 很陌生。我目前正在开发自己的设计组合，以更深入地了解 HTML、CSS 和 JS。

使用以下几行填充我的 flickity 滑块，关于选择我的画廊的哪个图块。我敢肯定会有更短的方法来编码，但我不确定如何。我只知道应该是vanilla JS :-)

 // Slider 01
var trigger1 = document.getElementById("trigger1");
trigger1.onclick = function () {
  cell1.src = "./_mat/slider_01_01.png";
  cell2.src = "./_mat/slider_01_02.png";
  cell3.src = "./_mat/slider_01_03.png";
  cell4.src = "./_mat/slider_01_04.png";
  showSlider();
};

// Slider 02
var trigger2 = document.getElementById("trigger2");
trigger2.onclick = function () {
  cell1.src = "./_mat/slider_02_01.png";
  cell2.src = "./_mat/slider_02_02.png";
  cell3.src = "./_mat/slider_02_03.png";
  cell4.src = "./_mat/slider_02_04.png";
  showSlider();
};

// Slider 03
var trigger3 = document.getElementById("trigger3");
trigger3.onclick = function () {
  cell1.src = "./_mat/slider_03_01.png";
  cell2.src = "./_mat/slider_03_02.png";
  cell3.src = "./_mat/slider_03_03.png";
  cell4.src = "./_mat/slider_03_04.png";
  showSlider();
};

// Slider 04
var trigger4 = document.getElementById("trigger4");
trigger4.onclick = function () {
  cell1.src = "./_mat/slider_04_01.png";
  cell2.src = "./_mat/slider_04_02.png";
  cell3.src = "./_mat/slider_04_03.png";
  cell4.src = "./_mat/slider_04_04.png";
  showSlider();
};

// Slider 05
var trigger5 = document.getElementById("trigger5");
trigger5.onclick = function () {
  cell1.src = "./_mat/slider_05_01.png";
  cell2.src = "./_mat/slider_05_02.png";
  cell3.src = "./_mat/slider_05_03.png";
  cell4.src = "./_mat/slider_05_04.png";
  showSlider();
};

// Slider 06
var trigger6 = document.getElementById("trigger6");
trigger6.onclick = function () {
  cell1.src = "./_mat/slider_06_01.png";
  cell2.src = "./_mat/slider_06_02.png";
  cell3.src = "./_mat/slider_06_03.png";
  cell4.src = "./_mat/slider_06_04.png";
  showSlider();
};

非常感谢你的帮助。对此，我真的非常感激！

标签： javascriptarraysflickity

解决方案

您可以执行以下步骤：

  1. 创建数组，其中键是触发计数器，值是图像数组；
  2. 为onclick创建函数，其中传递参数“key”，key是数组的key。

我认为这更灵活，因为您可以添加任何名称的图像。

推荐阅读