Изменить значение первого входного jquery

Question

Я использую некоторый spinner с шрифтом-awesome для типа ввода типа с бутстрапом, но у меня проблема с значением события, если у меня больше номера типа ввода на странице, это значение изменения для всех из них, но мне нужно только для того, который редактируется

Вот где я есть проблемы

(function ($) { 
    $('.spinner .btn:first-of-type').on('click', function() { 
    $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1); 
    }); 
    $('.spinner .btn:last-of-type').on('click', function() { 
    $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1); 
    }); 
})(jQuery); 

И здесь вы можете посмотреть полный пример

http://codepen.io/anon/pen/YGqLbv

Answer 1

Вы должны использовать ключевое слово this в обработчиках событий нажмите на ссылку на кнопке, которая была нажата. Из этого элемента вы можете пересечь DOM, чтобы найти соответствующий вход. Попробуйте это:

$('.spinner .btn:first-of-type').on('click', function() { 
 
    $(this).closest('.spinner').find('input').val(function(i, v) { 
 
    return parseInt(v, 10) + 1; 
 
    }); 
 
}); 
 
$('.spinner .btn:last-of-type').on('click', function() { 
 
    $(this).closest('.spinner').find('input').val(function(i, v) { 
 
    return parseInt(v, 10) - 1; 
 
    }); 
 
});

.spinner { 
 
    width: 100%; 
 
} 
 
.spinner input { 
 
    text-align: left; 
 
} 
 
.input-group-btn-vertical { 
 
    position: relative; 
 
    white-space: nowrap; 
 
    width: 1%; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 
.input-group-btn-vertical > .btn { 
 
    display: block; 
 
    float: none; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 8px; 
 
    margin-left: -1px; 
 
    position: relative; 
 
    border-radius: 0; 
 
} 
 
.input-group-btn-vertical > .btn:first-child { 
 
    border-top-right-radius: 4px; 
 
} 
 
.input-group-btn-vertical > .btn:last-child { 
 
    margin-top: -2px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
.input-group-btn-vertical i { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="page-header"> 
 
    <h1>Bootstrap 3 input-spinner</h1> 
 
    </div> 
 
    <div class="input-group spinner"> 
 
    <input type="text" class="form-control" value="42"> 
 
    <div class="input-group-btn-vertical"> 
 
     <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> 
 
     <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
 
    </div> 
 
    </div> 
 

 
    <div class="input-group spinner"> 
 
    <input type="text" class="form-control" value="42"> 
 
    <div class="input-group-btn-vertical"> 
 
     <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> 
 
     <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

вы можете использовать метод ближайший() для поиска ближайшего кока затем найти вход

(function ($) { 
    $('.spinner .btn:first-of-type').on('click', function() { 
    $closest_input= $(this).closest('.spinner').find('input'); 
    $closest_input.val(parseInt($closest_input.val(), 10) + 1); 
    }); 
    $('.spinner .btn:last-of-type').on('click', function() { 
    $closest_input= $(this).closest('.spinner').find('input'); 
    $closest_input.val(parseInt($closest_input.val(), 10) - 1); 
    }); 
})(jQuery); 

Answer 3

Simplyfied:..

(function ($) { 
    $('.spinner .btn').on('click', function() { 
    var down = $(this).is(':last-of-type'); 
    $(this).parents('.spinner').find('input').val(function(i, v) { 
     return parseInt(v, 10) + 1 * (down ? -1 : 1); 
    }); 
    }); 
})(jQuery);