На странице 8 одинаковых блоков, в которых пользователь может "лайкать".
Сейчас - класс накидывается правильно. Но, все сердечки перекрашиваются в красный;
Надо - чтобы перекрашивалось только сердечко, которое внутри блока, где кликнули "нравится".
HTML код менять нельзя.
Помогите разобраться.
$(document).ready(function() {
if ($('.bx-ilike-button').length > 0) {
let $like = $('.bx-ilike-right');
let $text = $('.bx-ilike-text');
$text.on("click", function() {
$like.toggleClass("withLike");
$like.closest('.bx-ilike-right');
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
console.log(className);
});
}
})
.ilike-light-reviews .bx-ilike-button {
font-size: 11px;
color: #969696;
display: inline-block;
height: 20px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.ilike-light-reviews .bx-ilike-right-wrap {
display: inline-block;
height: 20px;
cursor: default;
}
.ilike-light-reviews .bx-you-like .bx-ilike-right {
background-position: 0 2px;
}
.ilike-light-reviews .bx-ilike-right {
background: none;
display: inline-block;
height: 15px;
padding: 0 5px 0 20px;
background-image: url(../images/heart.gif)!important;
background-repeat: no-repeat;
background-size: 15px 15px;
color: #000;
}
.ilike-light-reviews .bx-ilike-text {
display: inline-block;
height: 17px;
padding: 3px 0px 0;
text-decoration: none;
cursor: pointer;
}
.ilike-light-reviews .bx-ilike-button-hover .bx-ilike-text {
text-decoration: underline;
}
.withLike {
background-image: url(../images/heart_red.gif)!important;
background-repeat: no-repeat;
background-size: 15px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="bx-ilike-button bx-ilike-button-hover" id="bx-ilike-button-FORUM_POST-1248-1541780889" style="visibility: hidden;">
<span class="bx-ilike-right-wrap bx-you-like" data-myreaction="like">
<span class="bx-ilike-right">1</span>
</span>
<span class="bx-ilike-left-wrap bx-you-like-button">
<span class="bx-ilike-text">Не нравится</span>
</span>
</span>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости