Не отрабаывает метод .closest

204
11 апреля 2019, 00:00

На странице 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>

READ ALSO
Как можно сделать портфолио в две строки по 3 столбца с переносами при изменении разрешения?

Как можно сделать портфолио в две строки по 3 столбца с переносами при изменении разрешения?

Как можно сделать портфолио в две строки по 3 столбца с переносами при изменении разрешения? Сделать адаптивным через флекс/грид? Как на скриншоте

202
Почему не работает max-width?

Почему не работает max-width?

Помогите, пожалуйста, понять, почему не работает свойство max-width: 1650px; для блока с классом "header-wrapper"

209
Отправить POST запрос с JSON телом при помощи WebClient (C#)

Отправить POST запрос с JSON телом при помощи WebClient (C#)

Если я правильно понимаю, то WebClient высокоуровневый, даже выше чем HttpClient

237
Временная смена цвета

Временная смена цвета

Нужно на 2 секунды изменить цвет Border на другой, но по истечению времени вернуть начальный цвет(чёрный)А какой цвет будет появляться, узнаем...

231