Изменение иконки при клике

Question

Есть каталог товаров, необходимо сделать, чтоб при клике на иконку "добавить в корзину", она изменялась на другую. На бэке выглядит так:

<svg class="i-icon">
     <use xlink:href="#<?= $itemBasket!= '' ? 'icon-done' : 'icon-cart'?>"></use>
</svg>

Подскажите как сделать на фронте, чтоб иконка менялась без перезагрузки страницы, просто по клику?

Answer 1

Как вариант.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        svg
        {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<svg class="i-icon">
     <use xlink:href="#icon-cart"></use>
</svg>

<script type="text/javascript">
    $('.i-icon').on('click', function(e)
    {
        alert(e.currentTarget.firstElementChild.attributes[0].value)
        if(e.currentTarget.firstElementChild.attributes[0].value == "#icon-cart")
        {
            e.currentTarget.firstElementChild.attributes[0].value = "#icon-done";
            alert(e.currentTarget.firstElementChild.attributes[0].value)
        }
        else
        {
            e.currentTarget.firstElementChild.attributes[0].value = "#icon-cart";
            alert(e.currentTarget.firstElementChild.attributes[0].value)
        }
    })
</script>

</body>
</html>

Answer 2

const handler = e => {
  const useEl = (e.currentTarget ?? e).querySelector('use'),
        isDone = /-done$/i.test(useEl.getAttribute('xlink:href'));
  useEl.setAttribute('xlink:href', `#icon-${isDone ? 'cart' : 'done'}`);
};
for (const svgEl of document.querySelectorAll('.i-icon'))
  svgEl.addEventListener('click',  handler);

.i-icon { width: 5rem; height: 5rem; cursor: pointer; }
.i-icon + .i-icon { margin-left: 3rem; }

<svg class="i-icon" viewBox="0 0 100 100">
  <defs>
    <circle id="icon-cart" cx="50" cy="50" r="50" fill="#ccc" />
    <circle id="icon-done" cx="50" cy="50" r="50" fill="#4d4" />
  </defs>
  <use xlink:href="#icon-cart"></use>
</svg>

<svg class="i-icon" viewBox="0 0 100 100">
  <defs>
    <circle id="icon-cart" cx="50" cy="50" r="50" fill="#ccc" />
    <circle id="icon-done" cx="50" cy="50" r="50" fill="#4d4" />
  </defs>
  <use xlink:href="#icon-cart"></use>
</svg>

БЛОГ НА HUSL

Изменение иконки при клике

Ответы (2 шт):