更改第一個輸入jquery的值

Question

我正在使用一些帶有font-awesome的微調來使用bootstrap對輸入類型編號進行樣式設置，但是我遇到了事件值問題，如果頁面上有更多的輸入類型編號，但我只需要爲一個被編輯

這裏就是我有問題

(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

您需要使用Click事件處理程序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);