DOM несколько идентификаторов с той же функцией

Question

Как заставить идентификаторы использовать одну и ту же функцию?Я планирую сделать больше элементов с той же функцией, но не хочу делать больше функций.

 var star_1 = document.getElementById("star1");
    var star_2 = document.getElementById("star2");

    var toggle = false;

    favToggle = function() {


        if (toggle === true) {
            star_1.src = "assets/svg/checked-star.svg";

        } else {
            star_1.src = "assets/svg/unchecked-star.svg";
        }

        toggle = !toggle;
    }

     favToggle1 = function() {


        if (toggle === true) {
            star_2.src = "assets/svg/checked-star.svg";

        } else {
            star_2.src = "assets/svg/unchecked-star.svg";
        }

        toggle = !toggle;
    }

    star_1.addEventListener("click", favToggle);
    star_2.addEventListener("click", favToggle1);

Answer 1

// Number of stars you have
const nbStars = 4;

// An array where we keep the toggle state of each star
const toggles = [];

// Deal with the stars. One by one
for (let i = 0; i < nbStars; i += 1) {
  // Setup the initial state of the toggle
  toggles.push(false);

  const star = document.getElementById(`star${i + 1}`);

  star.addEventListener('click', () => {
    if (toggles[i] === true) {
      star.innerHTML = 'assets/svg/checked-star.svg';
    } else {
      star.innerHTML = 'assets/svg/unchecked-star.svg';
    }

    // Change the state of the toggle for that particular star
    toggles[i] = !toggles[i];
  });
}

.star {
  height: 5em;
  width 5em;
  background-color: #444444;
  margin: 1em;
  color: white;
}

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>

---

Альтернатива с использованием @brk хорошая идея о querySelectorAll

const toggles = Array.from(document.querySelectorAll('[id^="star"]')).map((x, xi) => {
  x.addEventListener('click', () => {
    if (toggles[xi] === true) {
      x.innerHTML = 'assets/svg/checked-star.svg';
    } else {
      x.innerHTML = 'assets/svg/unchecked-star.svg';
    }

    // Change the state of the toggle for that particular star
    toggles[xi] = !toggles[xi];
  });

  // Setup the initial state of the toggle
  return false;
});

.star {
  height: 5em;
  width 5em;
  background-color: #444444;
  margin: 1em;
  color: white;
}

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>
<div id="star3" class="star"></div>
<div id="star4" class="star"></div>

Answer 2

Вы можете использовать селектор подстановочных знаков.В этом примере он выбирает все элементы с id, начиная с star.Затем итерация каждого из них и добавление слушателя событий к нему

document.querySelectorAll("[id^='star']").forEach(function(elem) {
  this.addEventListener("click", favToggle);
})

function favToggle() {
  console.log('Button clicked')
}

<button id='star1'>Button 1</button>
<button id='star2'>Button 2</button>
<button id='star3'>Button 3</button>
<button id='star4'>Button 4</button>

Answer 3

Цель написания функции заключается в том, чтобы иметь возможность легко повторно использовать предоставляемые ею функции.Вы можете получить доступ к внешним переменным в вашей функции, передав их в качестве аргументов.Смотрите комментарии в коде ниже:

//Create your vars
var star_1 = document.querySelector('#star1');
var star_2 = document.querySelector('#star2');
var toggle = false;

//Define the function to accept a parameter (a star)
function favToggle(star) {
  if (toggle === true) {
    star.src = "assets/svg/checked-star.svg";
  } else {
    star.src = "assets/svg/unchecked-star.svg";
  }
  toggle = !toggle;

  //Log some info so we can see it's working as expected
  console.log(`${star.id} src property is now: ${star.src}`);
  console.log(`toggle is now: ${toggle}`);
}

//Add your event listeners by passing a reference to the star (this)
star_1.addEventListener("click", function() {
  favToggle(this);
});
star_2.addEventListener("click", function() {
  favToggle(this);
});

<div id="star1">star1</div>
<div id="star2">star2</div>

Answer 4

Используйте querySelectorAll(), чтобы получить оба "#star1,#star2". А затем используйте forEach() и addEventListener() для каждого элемента.

var stars = document.querySelectorAll("#star1,#star2");
stars.forEach(i => {
  i.addEventListener("click",function(){
    if (toggle === true) {
        this.src = "assets/svg/checked-star.svg";
    } else {
        this.src = "assets/svg/unchecked-star.svg";
    }
    toggle = !toggle;
  })
})