0

Идея была простая: по нажатию на li, ему переключается класс на active (для стилизации и для перехвата активного элемента в js), значение его data забирается и, суммируясь со всеми active, пишется в #result.

Статично, при загрузке сделать получается, а вот, чтобы шел перерасчет по клику - пока никак... Или только в + - суммируется постоянно. А надо, соответственно, чтобы отсутствие active у элемента, забирало его значение из суммы...

Такой html:

<ul class="symptom-list">
    <li data="3" class="active">Симптом 1</li>
    <li data="4" class="active">Симптом 2</li>
    <li data="5" class="">Симптом 3</li>
    <li data="6" class="">Симптом 4</li>
    <li data="7" class="">Симптом 5</li>
</ul>
<div class="symptom-result">
    <p><span id="result">0</span></p>
</div>

И текущая попытка в js:

var summ = 0;
var elem = $('.symptom-list li.active');

$(".symptom-list li").click(function () {
    $(this).toggleClass("active");
    $.each(elem, function(){
        summ += parseInt($(this).attr('data'));
    })
    $('#result').html(summ);
});

Чуть доработанная версия кода @Arendach, являющаяся правильным ответом:

$(document).on('click', '.symptom-list li', function () {
    $(this).toggleClass("active");

    var elem = $('.symptom-list li.active');
    var sum = 0;
    $.each(elem, function () {
        sum += parseInt($(this).attr('data'));
    });

    $('#result').html(sum);
});

1 ответ 1

0

Первая проблема в том что вы вынесли переменную sum за пределы события, а надо чтобы при каждом клике переменная обнулялась(после клика присвоить ей значение 0)

И вторая проблема то что var elem тоже определена еще до события, то есть цикл ходит постоянно по одним и тем же элементам.

$(document).on('click', '.symptom-list li', function () {
    $(this).toggleClass("active");

    var sum = 0;
    $.each('.symptom-list li.active', function () {
        sum += parseInt($(this).attr('data'));
    });

    $('#result').html(sum);
});
9
  • Спасибо за ответ. Да, эту логику я не учел. На сайте стоит jQuery v1.11.2 - в консоли получаю ошибку при клике "Cannot use 'in' operator to search for '22' in .symptom-list li.active"
    – Sepika
    22 ноя 2018 в 11:50
  • Метод on() введен в jQuery-1.7, чтобы объединить три метода библиотеки, устанавливающие обработчики событий на элементы страницы: .bind(), .delegate(), .live(). Сами эти методы считаются теперь устаревшими, хотя еще поддерживаться. Установить обработчик, срабатывающий только один раз, по прежнему можно только с помощью отдельного метода .one().
    – Arendach
    22 ноя 2018 в 11:56
  • добавил, как вы и сказали, в ваш код var elem с li.active и уже elem после each в код - все заработало! Я ваш код чуть поправлю, как заработало у меня, чтобы с чистой совестью отметить решением. Большое спасибо!
    – Sepika
    22 ноя 2018 в 11:57
  • @Sepika Не надо пытаться править сообщение автора. Отклонил правку. Если вы хотите -- можете в комментариях описать или отдельным ответом или вносить правку но всё же только после того как он согласится.
    – A K
    22 ноя 2018 в 12:00
  • @Arendach Просмотрите правку.
    – A K
    22 ноя 2018 в 12:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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