Есть ли способ заставить вложенный l oop использовать тот же счетчик, что и l oop?

Question

Если его нет, как я могу создать этот код с меньшим количеством строк, учитывая, что у меня может быть много делений?

var divs = document.querySelectorAll(".content");
var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

divs[0].addEventListener("click", function(){
    photoes[0].classList.toggle("showImage");
    para[0].classList.toggle("showText");
});
divs[1].addEventListener("click", function(){
    photoes[1].classList.toggle("showImage");
    para[1].classList.toggle("showText");
});
divs[2].addEventListener("click", function(){
    photoes[2].classList.toggle("showImage");
    para[2].classList.toggle("showText");
});

Answer 1

Вы можете использовать оператор spread и функцию map с параметром (item, index) как

var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

[...document.querySelectorAll(".content")].map((item, index)=>{
  item.addEventListener("click", function(){
    photoes[index].classList.toggle("showImage");
    para[index].classList.toggle("showText");
});
}

var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

[...document.querySelectorAll(".content")].map((item, index)=>{
  item.addEventListener("click", function(){
    photoes[index].classList.toggle("showImage");
    para[index].classList.toggle("showText");
});
}

Answer 2

Вы можете сделать что-то вроде этого:

var divs = document.querySelectorAll(".content");
var photoes = document.querySelectorAll(".images");
var para = document.querySelectorAll("p");

divs.forEach(function (div, index) {
    div.addEventListener("click", function(){
       photoes[index].classList.toggle("showImage");
       para[index].classList.toggle("showText");
    }
})

Проверьте Array.prototype.forEach документацию для получения дополнительной информации о методе и его параметрах.