jQuery draggable и droppable вместе с data () возвращает NaN

Я играл с этим куском кода, и все, казалось, работало нормально. Когда я перетаскиваю один из желтых полей над красным контейнером, переменная price увеличивается с помощью значения data-price , а затем вычитается, когда желтая рамка выходит из красного контейнер.

Проблема возникает, когда я перетаскиваю их обратно на красный контейнер еще раз и приводит к NaN. $ (". draggable [data-item = '" + value + "']"). data ('price'); кажется неопределенным.

Любая помощь в правильном направлении приветствуется.

$(function() {
  var price = 0, math = '', items = [];
  function calcPrice(math) {
      console.log(items);
      $.each( items, function( key, value ) {
        if(math == 'add')
          price += $(".draggable[data-item='" + value + "']").data('price');
        if(math == 'remove')
          price -= $(".draggable[data-item='" + value + "']").data('price');
      });
    $("#droppable").text(price);
  }
  $(".draggable").draggable({ containment: "#container", scroll: false });
  $("#droppable").droppable({
    drop: function(e, u) {
      items.push(u.draggable.data('item'));
      calcPrice('add');
    },
    out: function(e, u) {
      calcPrice('remove');
      items.splice($.inArray(u.draggable.data('item', items),1));
    }
  });
});

 

  <div id="container">
    <div id="droppable"></div>
    <div class="draggable" data-item="1" data-price="541">541</div>
    <div class="draggable" data-item="2" data-price="542">542</div>
  </div>

Jsbin: http://jsbin.com/exilos/1/edit

0
@ estrar..i думаю, проблема с круговой ссылкой..did u проверить ур журнала?
добавлено автор Rinku, источник

1 ответы

the problematic line in ur code is
items.splice($.inArray(u.draggable.data('item', items),1));
I have changed that to
items.splice($.inArray(u.draggable.data('item'), items));
NaN problem is not there anymore ..u have to check the calculation of price ..
see this link

2
добавлено
Ах, отлично. Спасибо! Да, я вижу проблему с расчетом, если элемент периодически отбрасывается в красный контейнер, он будет складываться каждый раз. Вы тоже получили свой взнос;)
добавлено автор estrar, источник
upvote ??? просто шутит: D..happy помочь ..
добавлено автор Rinku, источник
:) .. yah..one вещь, которую вы можете делать, когда u r dropping повторно инициализирует цену ...
добавлено автор Rinku, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском