Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Работа скрипта в на конкретном блоке (https://javascript.ru/forum/jquery/70251-rabota-skripta-v-na-konkretnom-bloke.html)

BigNewGod 22.08.2017 17:42

Работа скрипта в на конкретном блоке
 
Есть список с товарами. В каждом пункте есть блок с количеством едениц, и две кнопки + и -. Если есть более одного товара то не зависит на каком блоке кликать скрипт работает на всех, а нужно чтобы только на блоке на котором происходит действие.





Код jQuey:

var result = $('.cart__goods_item .cart__numbers_result');
    var rel = $('.cart__goods_item .cart__numbers_reload');
    var i = 1;

    $('.cart__goods_item .cart__numbers_plus').on('click', function() {
        if (i < 10) {
            i++;
            result.text(i);
        }
    });
    $('.cart__goods_item .cart__numbers_minus').on('click', function() {
        if (i > 1) {
            i--;
            result.text(i);
        }
    });
    rel.on('click', function() {
        i = 1;
        result.text(i);
    });

Nexus 22.08.2017 17:51

Не тестировал.
$('.cart__goods_item').find('.cart__numbers_plus,.cart__numbers_minus').on('click',function(){
	var $t=$(this),
		$item=$t.parents('.cart__goods_item'),
		$res=$item.find('.cart__numbers_result'),
		value=parseInt($res.text());
	
	if($t.hasClass('cart__numbers_plus'))
		value++;
	else
		value--;
	
	$res.text(value<1?1:(value>10?10:value));
});
$('.cart__goods_item .cart__numbers_reload').click(function(){
	$('.cart__goods_item .cart__numbers_result').text(1);
});

BigNewGod 22.08.2017 17:54

Огромное спасибо!!! :dance: Работает!!!

laimas 22.08.2017 18:40

<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('button').click(function() {
        var o = $('#total'), n = +o.text();
        n = n + +this.value || 1;
        n = n < 11 ? n : 10; 
        o.text(n)
    })  
})
</script>
</head>
<body>
<div id="total">1</div>
<button value="-1">--</button>
<button value="1">+</button>
</body>
</html>

Nexus 30.08.2017 15:03

laimas,
Цитата:

Сообщение от BigNewGod
Есть список с товарами. В каждом пункте есть блок с количеством едениц, и две кнопки + и -. Если есть более одного товара то не зависит на каком блоке кликать скрипт работает на всех, а нужно чтобы только на блоке на котором происходит действие.

*!*<html>*/!*
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
/* © https://javascript.ru/forum/jquery/70251-rabota-skripta-v-na-konkretnom-bloke.html#post462385 */
$(function() {
    $('button').click(function() {
        var o = $('#total'), n = +o.text();
        n = n + +this.value || 1;
        n = n < 11 ? n : 10; 
        o.text(n)
    })  
})
</script>
</head>
<body>
<div>
<div id="total">1</div>
<button value="-1">--</button>
<button value="1">+</button>
</div>
<div>
<div id="total">1</div>
<button value="-1">--</button>
<button value="1">+</button>
</div>
</body>
</html>


Часовой пояс GMT +3, время: 01:15.