Как получить значение inpu с блоков с одинаковым классом?

Question

[Dmmitry]

Здравствуйте! Есть 4 блока товаров с классом .BLOCK, в каждом есть input .QUANTITY и кнопка .ADD
По кнопке .ADD блок должен отправлять в корзину c параметрами id товара и количество товара.

Товары добавляются нормально, но количество устанавливается только по input .QUANTITY первого блока, а нужно чтобы input .QUANTITY брался с каждого блока свой.

<?php foreach ($products as $product) { ?>
    
  <div class="food_box_scroll_item"> <img  class="img_box_scroll" src="<?php echo $product['thumb']; ?>" alt="Фото <?php echo $product['name']; ?>">
    <div class="font_food_box_scroll_h"><?php echo $product['name']; ?></div>
    <div class="font_food_box_scroll"><?php echo $product['tags']; ?></div>
    <br>
    <div class="block_number_of_servings"> <span class="plus minus"><span>–</span></span> &nbsp;
      <input name="number_of_servings" type="text" value="1" size="3" maxlength="6" class="value_number_of_servings">
      &nbsp; <span class="plus"><span>+</span></span> <span class="servings" >порц.</span></div>
    <div class="block_price"><span class="font_price"><?php echo substr($product['price'], 0, -3); ?></span> <span class="font_currency">руб.</span></div>
    <div class="btn_food_box_scroll">
        <a rel="<?php echo $product['product_id']; ?>" class="but_call_min"><span>Купить</span></a>
    </div>
  </div>
<?php } ?>

$(document).ready(function() {
    $(".btn_food_box_scroll .but_call_min").click(function(){
    prod_id = $(this).attr("rel");
    count_this = parseInt($(this).parent().prev(".block_number_of_servings").children(".value_number_of_servings").val());
    addToCart(prod_id, count_this);
    });
});
 
function addToCart(product_id, quantity) {
 
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',
        success: function(json) {
            $('.success, .warning, .attention, .information, .error').remove();
            
            if (json['redirect']) {
                location = json['redirect'];
            }
            
            if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
                
                $('.success').fadeIn('slow');
                
                $('#cart-total').html(json['total']);
                
                // Обновляем корзину
                $('#cart').addClass('active');
                    
                $('#cart').load('index.php?route=module/cart #cart > *');
                
                $('#cart').live('mouseleave', function() {
                    $(this).removeClass('active');
                });
                
                $('html, body').animate({ scrollTop: 0 }, 'slow'); 
            }   
        }
    });
}

Comments

[Никита Гущин]

Я не нашел input .QUANTITY в приведенном Вами коде :(

[Dmmitry]

@iNikNik это условное обозначение, в коде есть input с классом value_number_of_servings, он там единственный, о нем и шла речь

[Никита Гущин]

@likeapimp, кстати, было бы продуктивней, если бы Вы смогли загрузить уже готовый HTML (а не PHP), скажем на jsfiddle.net

Answer 1

[Никита Гущин]

Я так понимаю, что у вас вот так выглядит иерархия DOM:

div.food_box_scroll_item > div.btn_food_box_scroll > a.but_call_min

Тогда вам надо немного подправить ваш JS:

$('.but_call_min').click(function(){
    console.log('Selected:',$(this).closest('.food_box_scroll_item').find(".value_number_of_servings").val());
});

Этот код выводит в консоль значение с input.

А вот так будет выглядеть Ваш код:

/*Add to cart*/
$(document).ready(function() {
	$(".food_box_scroll_item .btn_food_box_scroll .but_call_min").click(function(){
		prod_id = $(this).attr("rel");
		count_this = parseInt($(this).closest('.food_box_scroll_item').find(".value_number_of_servings").val());		
		// addToCart(prod_id, count_this);
                // alert(count_this); // - так плохо
                console.log(count_this); // - так хорошо
	});
});

Comments

[Dmmitry]

Выдает val "NaN"
Иерархия:
food_box_scroll_item -> block_number_of_servings -> value_number_of_servings (это к input)

[Никита Гущин]

Проверьте, что выдаст console.log($(this).parent('.food_box_scroll_item')); ?

[Никита Гущин]

@likeapimp, упс, случайно попал url вашего сайта и я не удержался .... ) вообщем, я вспомнил, что никогда не понимал логики работы метода parent ... Я обновил ответ, этот код у меня работал прекрасно на вашем сайте)

[Dmmitry]

@iNikNik не совсем понял вас

[Dmmitry]

@iNikNik "undefined" выдает

[Никита Гущин]

У Вас там ошибка, уберите alert, код из примера выводит в консоль. Либо уберите console.log, если хотите выводить в alert .. но это не по фэншую )))

[Dmmitry]

@iNikNik у меня alert типа как для теста, смотрю что выводит, щас тогда уберу alert

[Dmmitry]

@iNikNik убрал, теперь console.log вставить?

[Никита Гущин]

@likeapimp, ну лучше используйте консоль для отладки. Если у вас хром - ф12 - консоль

[Dmmitry]

@iNikNik clip2net.com/s/j2WWsY

[Никита Гущин]

@likeapimp, да, все верно. '1' - значение в инпуте.

[Dmmitry]

@iNikNik о, точно.. а как теперь мне это передать в переменную count_this?

[Никита Гущин]

@likeapimp, написал дополнение к моему ответу выше)

[Dmmitry]

@iNikNik огромное спасибо!) работает)

[Никита Гущин]

@likeapimp не за что) обращайтесь) сайт у Вас интересный. Вы от веб студии, или фрилансите ?)

[Dmmitry]

@iNikNik спасибо) от веб-студии)