1

есть кнопка лайкпри нажатия должна заполнится черная цветом подскажите как это сделать? я не совсем понимаю реализацию

1
  • Да это сработало , но проблема теперь другая появилась у меня есть 6 блоков абсолютно одинаковых только картинки другие лайк работает почему то на 1 блоке на остальных не хочет нажимаю лайки на другие они не активны 23 мая 2020 в 13:38

2 ответа 2

1

Вот рабочий код.
При нажатии на кнопку, событие лайка сработает только на этой конкертной кнопке.
Так-же нужно изменить id для каждой кнопки это нужно будет для бэкенда.
Вставьте JS код, изменив на свои классы.

const doc = document
const log = console.log

const aria = {
    label: {
        true: "Отправить реакцию «нравится»",
        false: "Отменить реакцию «нравится»"
    }
}

doc.addEventListener("click", ({ target }) => {
    const likeBtn = target.closest(".selector")

    if (!likeBtn) return;
    likeBtn.ariaPressed = likeBtn.ariaPressed === "true" ? "false" : "true";
    likeBtn.ariaLabel = aria.label[likeBtn.ariaPressed];

    log(
        `Отправляю запрос, что кто-то лайкнул пост с id ${likeBtn.dataset.id}`
    )
})
body {
  display: flex;
}

.selector {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: orange;
  cursor: pointer;
}

.selector + .selector {
  margin-left: 15px;
}

.selector[aria-pressed=true] {
    opacity: 1;
    background-color: black;
}

.selector[aria-pressed=true] svg {
    fill: red;
}

.selector[aria-pressed=true] svg path {
    stroke: white;
}
<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="0">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="1">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

<button class="selector" aria-label="Отправить реакцию «нравится»" aria-pressed="false" data-id="2">
    <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.8398 2.39496C13.013 -0.169205 10.2871 2.03882 9.27755 
    3.46336C8.26797 2.03882 5.54163 -0.169205 2.71481 2.39496C-0.112011 
    4.95912 1.87349 8.80536 3.2196 10.408C4.22918 11.6544 6.85456 14.361  
    9.27755 15.2158C11.7005 14.361 14.3254 11.6544 15.335 10.408C16.6811 
    8.80536 18.6666 4.95912 15.8398 2.39496Z" stroke="black" 
    stroke-width="2" stroke-linejoin="round"/>
</svg>
</button>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 1 ноя 2021 в 20:07
0

Вам нужен дополнительный класс. например

CSS

.like-active{
  color: black
}

Js

let $like = document.querySelector('selector');
$like.addEventListener( 'click', () => 
$like.classList.toggle('like-active') )
5
  • зачем доллар???
    – MoloF
    23 мая 2020 в 12:40
  • @MoloF использует jQuery 23 мая 2020 в 12:42
  • @MidNightElf в каком месте?????????????????????
    – MoloF
    23 мая 2020 в 12:50
  • @MoloF может по привычке поставил 23 мая 2020 в 12:51
  • @MoloF по привычке
    – Ravshan
    23 мая 2020 в 12:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.