Как при нажатии на li, создавать переменую и записывать в нее значение выбраного li?

Question

[timtimIT]

Здравствуйте.

Вот пример.
Как при нажатии на li , создавать переменную и записывать в нее значение выбранного li, то-есть если мы выбрали значение в блоке apples создается переменная apples и в нее записывается значение на котором мы остановились, и чтобы при клике сохранялся класс active у выбранных li?

$('.star-rating').hover(function(){
	$(this).addClass('star-rating-on').prevAll('.star-rating').addClass('star-rating-on');
}, function(){
	$('.star-rating').removeClass('star-rating-on');
});

var rating = {};

$('.star-rating').on('click', function(e) {
  e.preventDefault();
  
  var $this = $(this),
  	currentBlock = $(this).closest('li').attr('class');

  $('.' + currentBlock + '.star-rating').removeClass('star-rating-on').prevAll('.star-rating').removeClass('star-rating-on');
  $this.addClass('star-rating-on').prevAll('.star-rating').addClass('star-rating-on');
  
  rating[currentBlock] = $this.attr("data-item");

  console.log(rating)
  $('#data').text(JSON.stringify(rating));
});

Answer 1

[Radiks Alijevs]

Пожалуйста

Comments

[timtimIT]

Спасибо!

[timtimIT]

Подскажите, а можно заменить fruits[currentBlock] = $this.text(); $this.text() на $this.title() ?

[Radiks Alijevs]

timtimIT: title() такого нет свойства в jQuery, что вы хотите сделать?

[timtimIT]

Да,уже разобрался.. только появился нюанс, у меня почему-то не сохраняються классы li при клике... код немного изменен,добавил в описание...

[timtimIT]

все работает,только не сохраняются классы после нажатия...

[Radiks Alijevs]

timtimIT: можете выложить в codepen?

[timtimIT]

Вот

[Radiks Alijevs]

timtimIT: как на клик так и на hover один и тотже класс star-rating-on
и нужен пробел между currentBlock и .star-rating

[timtimIT]

$('.' + currentBlock + '\n' + '.star-rating') , так? и не понял по поводу "как на клик так и на hover один и тотже класс star-rating-on..." , меняю, ничего не получается...

[Radiks Alijevs]

timtimIT: вот так $('.' + currentBlock +' .star-rating')
на клик и на ховер используются разные css классы, смотрите мой пример

[timtimIT]

спасибо!)

[timtimIT]

блин, не совсем работает, если ставлю одинаковые классы - не работает , если на ховер star-rating-on а на клик star-rating - то работает на клике а на ховере нет... если наоборот то на клике не работает...

[timtimIT]

вот как если поставить одинаковые классы пример

Answer 2

[Scribblex]

var listItemContent = '';

$(document).on('click', 'li', function () {
var self = $(this);

listItemContent = self.html(); // на тот случай, если внутри элемента содержится не только текст, но и разметка

self.addClass('active').prevAll('li').addClass('active');
});

Answer 3

[Дмитрий Ковальский]

Если вы в обработчике события создадите переменную, то вне этого обработчика она видна не будет.Создайте более глобальную переменную, и проставляйте значение внутри обработчиков.