Как сделать «Добавить в избранное» на js?

Question

[Валерия]

function initFavs()
	{
		// Handle Favorites
		var items = document.getElementsByClassName('product_fav');
		for(var x = 0; x < items.length; x++)
		{
			var item = items[x];
			item.addEventListener('click', function(fn)
			{
				fn.target.classList.toggle('active');
			});
		}
	}

Есть такой код для иконки сердца. При нажатии на нее должна заливка меняться. Но у меня не получается сделать :(

У кого есть скрипт реализации на js кнопки сердечка? Сердечек на одной странице много и все они серые, пока человек не нажмет на одно из, тогда оно меняет цвет и никак не должно конфликтовать с др. сердечками.

большое спасибо. уже всю голову сломала. мне нужно без php. просто чтобы js отработал. при нажатии один раз - красное, при нажатии второй раз - снова серое.

Благодарю

Comments

[Дмитрий Баскаков]

Если вывести fn.target через console.log то что в ответе будет?

[Валерия]

Дмитрий Баскаков, доброй ночи!

Uncaught ReferenceError: fn is not defined
    at <anonymous>:1:13

[Сергей delphinpro]

Валерия, Он имел ввиду

var item = items[x];
      item.addEventListener('click', function(fn)
      {
        console.log(fn);
        fn.target.classList.toggle('active');
      });

Там не может быть not defined

[Дмитрий Баскаков]

Валерия,
Даже так?

function initFavs()
  {
    // Handle Favorites
    var items = document.getElementsByClassName('product_fav');
    for(var x = 0; x < items.length; x++)
    {
      var item = items[x];
      item.addEventListener('click', function(fn)
      {
        fn.target.classList.toggle('active');
        console.log(fn.target);
      });
    }
  }

[Alex931]

Код рабочий. Надо сделать так:

function initFavs()
  {
    // Handle Favorites
    var items = document.getElementsByClassName('block-star');
    for(var x = 0; x < items.length; x++)
    {
      var item = items[x];
      item.addEventListener('click', function(fn)
      {
        fn.target.classList.toggle('block-star-fav');
      });
    }
  }

  initFavs()

Только я свои классы подставил. Функция в конце вызывается.

Answer 1

[Сергей delphinpro]

Саму функцию initFavs() надеюсь вызываете? =)

внутри .product_fav есть еще элементы? Если есть, то в fn.target будет именно тот по которому непосредственно кликнули.

попробуйте поменять строку

fn.target.closest('.product_fav').classList.toggle('active');

В остальном код выглядит рабочим.

Comments

[Валерия]

поняла. спасибо, потестю этот вариант!