Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
1

Счетчик количества товаров. Внедрение на сайт. Наведите на правильную мысль

01.09.2017, 03:01. Просмотров 1513. Ответов 10
Метки нет (Все метки)

Вот тестовый сайт моего интернет магазина http://1.tdprofnastil.ru/catalog/stroytovary/fanera/

Сделал счетчик товаров.

Но при нажатии "+" или "-"(на счетчике), то количество увеличивается/уменьшается у всех товаров.

Наведите на правильную мысль.

HTML5
1
2
3
4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $out.val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.09.2017, 03:01
Ответы с готовыми решениями:

Счетчик количества товаров. Отрицательные значения
Не приходит в голову, как сделать, чтоб значения imput не уходили к отрицательным цифрам. ...

Наведите на мысль
Добрый день) Изучаю Borland C++ по А. Крейгу, надо ввести данную программу(приведена ниже), после...

Наведите на мысль решения задачи по массивам
Есть массив Objects. Задание - написать к нему различные методы (что нужно - под названием метода)....

Как настроить правильную активизацию товаров при появлении на остатке?
Ранее были сделаны доработки по обмену, а именно деактивация товаров , которых нет на остатке и...

Счетчик товаров в корзине
Делаю модуль для опенкарта, сверстал все, нужно сделать переключение &quot;что-то типа счетчика&quot;. Товар...

10
dailydose
661 / 207 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
Завершенные тесты: 1
01.09.2017, 07:10 2
Цитата Сообщение от Leonardo65 Посмотреть сообщение
Но при нажатии "+" или "-"(на счетчике), то количество увеличивается/уменьшается у всех товаров.
вполне логично же

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(this).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
Добавлено через 4 минуты
https://jsfiddle.net/8sx2vx6s/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
Javascript
1
2
3
4
5
6
7
8
$('.inc').on('click', function() {
    const $input = $(this).closest('div').find('input');
    $input.val(parseInt($input.val(), 10) + 1);
});
$('.dec').on('click', function() {
    const $input = $(this).closest('div').find('input');
    parseInt($input.val(), 10) > 1 && $input.val(parseInt($input.val(), 10) - 1);
});
0
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 07:24  [ТС] 3
Цитата Сообщение от dailydose Посмотреть сообщение
Javascript
1
2
3
4
5
6
7
8
$('.inc').on('click', function() {
* * const $input = $(this).closest('div').find('input');
* * $input.val(parseInt($input.val(), 10) + 1);
});
$('.dec').on('click', function() {
* * const $input = $(this).closest('div').find('input');
* * parseInt($input.val(), 10) > 1 && $input.val(parseInt($input.val(), 10) - 1);
});
был у меня такой вариант, но мне необходимо, что при зажатии кнопки количество увеличивалось/уменьшалось
0
dailydose
661 / 207 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
Завершенные тесты: 1
01.09.2017, 08:21 4
Цитата Сообщение от Leonardo65 Посмотреть сообщение
мне необходимо, что при зажатии кнопки количество увеличивалось/уменьшалось
дык в чём проблема то?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 300
  ,delay = maxDelay
  ,minDelay = 800
  ,start
  ,action
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(this).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(){ action = "inc";}
function incdecOff(){action = undefined; delay = maxDelay;}
function decOn(){ action = "dec";}
  
window.requestAnimationFrame(update);
0
01.09.2017, 08:21
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 08:31  [ТС] 5
Цитата Сообщение от dailydose Посмотреть сообщение
проблема
Грубо говоря у меня 100 позиций товара в интернет магазине.
когда я на одной позиции начинаю менять кол. при помощи счетчика, то меняется кол. на всех ста позициях

http://jsfiddle.net/uxurhakw/19/
0
dailydose
661 / 207 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
Завершенные тесты: 1
01.09.2017, 09:22 6
http://jsfiddle.net/uxurhakw/20/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 400
  ,delay = maxDelay
  ,minDelay = 100
  ,start
  ,action,
  el
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(el).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(e){ action = "inc"; el = e.target;}
function incdecOff(e){action = undefined; delay = maxDelay; el = e.target;}
function decOn(e){ action = "dec"; el = e.target;}
  
window.requestAnimationFrame(update);
1
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 09:37  [ТС] 7
Цитата Сообщение от dailydose Посмотреть сообщение
$(el).closest('div').find('input').val(v);
Спасибо. только получается .
На первой позиции я выбрал кол 2
Вторая позиция начинает отчет с 3
Третья с 4
0
dailydose
661 / 207 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
Завершенные тесты: 1
01.09.2017, 09:45 8
Лучший ответ Сообщение было отмечено Leonardo65 как решение

Решение

Цитата Сообщение от Leonardo65 Посмотреть сообщение
На первой позиции я выбрал кол 2
Вторая позиция начинает отчет с 3
Третья с 4
http://jsfiddle.net/uxurhakw/21/

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var $btnInc = $('.inc')
  ,$btnDec = $('.dec')
  ,$out = $('.amount')
  ,v = $out.val()
  ,maxDelay = 400
  ,delay = maxDelay
  ,minDelay = 100
  ,start
  ,action,
  el
;
 
function update(timestamp) {
  if(!start) start = timestamp;
  if(action  &&  (timestamp - start) >= delay) {
    start = timestamp;
    v = parseInt($(el).closest('div').find('input').val(), 10);
    if( delay > minDelay  &&  (delay -= 100) <= minDelay) delay = minDelay;
    switch(action){
      case "inc": v++; break;
      case "dec": if (v>1) v--; break;
    }
    $(el).closest('div').find('input').val(v);
  }
  window.requestAnimationFrame(update);
}
 
$btnInc.on('mousedown', incOn);
$btnInc.on('mouseup mouseout', incdecOff);
$btnDec.on('mousedown', decOn);
$btnDec.on('mouseup mouseout', incdecOff);
$out.on('input', function(){ v = $out.val(); });
 
function incOn(e){ action = "inc"; el = e.target;}
function incdecOff(e){action = undefined; delay = maxDelay; el = e.target;}
function decOn(e){ action = "dec"; el = e.target;}
  
window.requestAnimationFrame(update);
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
 
<div>
<button class="dec">-</button>
<input id="countID" class="amount" value="1"/>
<button class="inc">+</button>
</div>
1
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 09:49  [ТС] 9
Цитата Сообщение от dailydose Посмотреть сообщение
http://jsfiddle.net/uxurhakw/21/
Огромное Вам Вселенское спасибо!
0
mrtoxas
Модератор
Эксперт HTML/CSS
2826 / 2070 / 1272
Регистрация: 12.07.2015
Сообщений: 5,567
Записей в блоге: 3
01.09.2017, 10:08 10
Раз нормальный ответ уже дан, есть ленивый вариант
Можно подключить spinner jQuery UI. Может пригодится кому-то.
1
Вложения
Тип файла: zip ui.zip (45.4 Кб, 2 просмотров)
Leonardo65
0 / -1 / 0
Регистрация: 17.06.2016
Сообщений: 35
01.09.2017, 11:34  [ТС] 11
Цитата Сообщение от dailydose Посмотреть сообщение
проблема
А вы не знаете ?
Проблема с Safari.
Браузер полностью отказывается выполнять данный скрипт

Добавлено через 2 минуты
Цитата Сообщение от mrtoxas Посмотреть сообщение
spinner jQuery UI
Попробую с ним поработать
0
01.09.2017, 11:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.09.2017, 11:34

Внедрение компилятора на сайт
Всем привет, мне для дипломной работы нужно внедрить компилятор Паскаль на сайт. Суть работы:...

AJAX: Как прикрутить счетчик товаров?
Здравствуйте! Есть ajax добавление товара в корзину. Есть php счетчик отображающий кол-во...

Внедрение карты Google на сайт
Скажите как запостить к себе на сайт вот ету бесплатную карту? http://www.openstreetmap.org/


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru