0
<body>
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="">
    <span class="t_price">Телефон LG </span>цена:
    <span class="price">6200 </span>количество:
    <input type="text" size="1" value="0">
    <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""></span>
    <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""></span> <br>
</div>
<br>
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="">
    <span class="t_price">Телефон LG </span>цена:
    <span class="price">6200 </span>количество:
    <input type="text" size="1" value="0">
    <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""></span>
    <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""></span> <br>
</div>
    <span id="totalItem">
        Итого: <span>0</span>
    </span>
</body>

И есть jQuery:

$(document).ready(function(){

    var count = 0;
    $('.add_t').click(function(){

        $('input[type=text]').attr('value', count++);

    });     
}); 

Суть в том, чтобы при нажатии на плюсик, отображалось количество в поле инпут в значении value.

Знаю что как это делается с помощью this, но не знаю как, подскажите, пожалуйста.


UPD

http://jsfiddle.net/2kygh3ba/7/

Если это правильно то как передать это всё в php обработчик?

2 ответа 2

1

$(document).ready(function () {
    // Из-за того, что переменная у вас была объявлена вне функции,
    // ее значение наращивалось при клике на любой .add_t,
    // без привязки к продукту

    // var count = 0;

    $('.add_t').click(function () {
        // получаем родительский блок .product
        var product = $(this).closest('.product');
        
        // ищем в родительском блоке нужный input
        var product_input = product.find('input[type=text]');

        // Получаем предыдущее количество товара в input
        // и преобразуем в целочисленный тип
        var previous_product_count = parseInt(product_input.val(), 10);

        // Если оно не задано, ставим количество равным 1
        // По кнопке все-таки кликнули.

        if (!previous_product_count) {
            // Из-за того что у вас изначально count был равен 0
            // После первого клика на кнопку ничего не происходило
            var current_count = 1;
        } else {
            // Увеличиваем количество товара на 1
            var current_count = previous_product_count + 1;
        }

        // Записываем новое количество товара
        product_input.val(current_count);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="" /> <span class="t_price">Телефон LG </span>цена: <span class="price">6200 </span>колличество:
    <input type="text" size="1" value="0"> <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""/></span>
 <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""/></span> 
    <br/>
</div>
<br/>
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="" /> <span class="t_price">Телефон LG </span>цена: <span class="price">6200 </span>колличество:
    <input type="text" size="1" value="0"> <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""/></span>
 <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""/></span> 
    <br/>
</div> <span id="totalItem">
        Итого: <span>0</span>
</span>

Посмотреть пример

3
  • @TheDoctor, пожалуйста, не изменяйте мой ответ. После ваших правок встроенный пример не работает.
    – VenZell
    28 апр 2015 в 11:19
  • Проглючило, видимо, теперь работает. Код на jsFiddle надо давать как на вторичный пример, вставляйте, пожалуйста, код через редактор.
    – user31688
    28 апр 2015 в 11:26
  • @TheDoctor я также прошу вас не удалять мои пояснения из ответа. Это, как минимум невежливо. Я сам решу, что следует включить в ответ, а что нет. Я специально дал расширенные пояснения для новичка.
    – VenZell
    28 апр 2015 в 11:31
-1

Можно попробовать вот так:

$(document).ready(function(){

    var count = 0;
    $('.add_t').click(function(){
        var input = $(this).parent().find('input[type=text]');
        var inputValue = input.val();
        
        input.val(++inputValue);
        //$('input[type=text]').attr('value', count++);
    });     
}); 
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="">
    <span class="t_price">Телефон LG </span>цена:
    <span class="price">6200 </span>колличество:
    <input type="text" size="1" value="0">
    <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""></span>
    <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""></span> <br>
</div>
<br>
<div class="product" rel="1">
    <img class="img_t" src="http://24.img.avito.st/640x480/1406482124.jpg" alt="">
    <span class="t_price">Телефон LG </span>цена:
    <span class="price">6200 </span>колличество:
    <input type="text" size="1" value="0">
    <span class="add_t"><img src="http://vstrezhah.ru/p/add.png" alt=""></span>
    <span class="del_t"><img src="http://www.stitch.su/images/delete_label.gif" alt=""></span> <br>
</div>
    <span id="totalItem">
        Итого: <span>0</span>
    </span>

JSFiddle

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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