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 that you have read and understand our privacy policy and code of conduct.

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