есть кнопка лайкпри нажатия должна заполнится черная цветом подскажите как это сделать? я не совсем понимаю реализацию
-
Да это сработало , но проблема теперь другая появилась у меня есть 6 блоков абсолютно одинаковых только картинки другие лайк работает почему то на 1 блоке на остальных не хочет нажимаю лайки на другие они не активны– Саша Пупкин23 мая 2020 в 13:38
Добавить комментарий
|
2 ответа
Вот рабочий код.
При нажатии на кнопку, событие лайка сработает только на этой конкертной кнопке.
Так-же нужно изменить 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 ноя 2021 в 20:07
Вам нужен дополнительный класс. например
CSS
.like-active{
color: black
}
Js
let $like = document.querySelector('selector');
$like.addEventListener( 'click', () =>
$like.classList.toggle('like-active') )