简化 Javascript - 这是阵列的情况吗？

Question

I'm quite new to the whole JS thing. I'm currently developing my own design portfolio to get some deeper insights into HTML, CSS and JS.

With the following lines I fill my flickity slider, regarding which tile of my gallery is selected. I'm sure that there will be a much shorter way to code this, but I'm not sure how. I only know that it should be 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();
};

Thanks a lot for your help. I really appreciate it!

Answer 1

Try this:

for (let i = 1; i <= 6; i++) {
  var trigger = document.getElementById("trigger" + i);
  trigger.onclick = function () {
    cell1.src = "./_mat/slider_0"+i+"_01.png";
    cell2.src = "./_mat/slider_0"+i+"_02.png";
    cell3.src = "./_mat/slider_0"+i+"_03.png";
    cell4.src = "./_mat/slider_0"+i+"_04.png";
    showSlider();
  };
}

Answer 2

Take a look at this:

 var triggers = document.getElementsByClass("trigger"); var cells = [cell1,cell2,cell3,cell4] [].forEach.call(triggers, function (trigger) { let id = trigger.id.replace('trigger','') trigger.addEventListener("click", function() { cells.forEach(function(cell,i) { cell.scr = "./_mat/slider_"+id.padStart(2, '0')+"_"+ (''+i).padStart(2,'0') +".png"; }) showSlider(); }) });

It's better to add an event listener so that you can listen to several events. Also, you have to make your code be able to handle a various number of elements: in my code you can put all the triggers you want. I'm sure there is way inyour code to get the "cells", because initiating the array hardcoded like this is abad practice.

Answer 3

Try this

It does not care how many triggers you have - at least up to 99

const pad = num => ("0"+num).slice(-2); // change number of 0s and slice if more than 99 triggers

[...document.querySelectorAll("[id^=trigger]")].forEach(function(trigger) {
  trigger.addEventListener("click",function() { 
    const idx = this.id.replace("trigger","");
    cell1.src = "./_mat/slider_"+pad(idx)+"_01.png";
    cell2.src = "./_mat/slider_"+pad(idx)+"_02.png";
    cell3.src = "./_mat/slider_"+pad(idx)+"_03.png";
    cell4.src = "./_mat/slider_"+pad(idx)+"_04.png";
    showSlider();
  });
});  

Answer 4

You can do the following steps:

1. Create the array where keys are trigger counter and values are array of images;
2. Create the function for onclick, where you pass parameter "key", the key is key of the array.

I think this is more flexible as you can add images with any names.

Answer 5

Note that there are several patterns in your script. Both in the src strings, in the name of the selectors (trigger1, trigger2, ...) and name of variables, (cell1, cell2, ...). You could simplify all of this in a loop and using an array, see an example:

 for(let i = 1; i <= 6; i++) { let trigger = document.querySelector('#trigger' + i) trigger.addEventListener('click', event => { for(let b = 1; b <= 4; b++) { cell[b].src = "./_mat/slider_01_0" + b + ".png" showSlider() } } }

• Important , transform ceill into an array with each of the elements instead of creating several ceill variables, that way you could use this code above

Answer 6

I would do something like:

const cells = [cell1, cell2, cell3, cell4];
document.querySelectorAll("[id^=trigger]")].forEach(node => {
  const index = node.id.substr(7);

  node.addEventListener("click", () => {
    cells.forEach((cell, i) => 
      cell.src = `./_mat/slider_${index.padStart(2, "0")}_${String(i + 1).padStart(2, "0"}.png`);

    showSlider();
  });
});

Assuming you're running JS in a modern environment that supports template literals , padStart and NodeList's forEach

If you're sure you will never have more than 9 images you can definitely remove the padStart part.

PS This is assuming you're not modifying the underline HTML. If you can do that, it's better practice use classes instead of IDs.