jQuery獲取先前的輸入值

Question

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
        </span>
    </div>
</div>

我有上面的HTML。 我的問題是單擊＃btn-chat時如何獲取輸入值。 我一直在嘗試使用諸如.prev（）和.prevAll（）之類的jQuery函數，但這些函數對我不起作用。

Answer 1

鑒於input元素具有id屬性，因此它應該是唯一的，因此您可以直接選擇它而無需遍歷DOM：

$('#btn-chat').click(function() {
    var inputVal = $('#btn-input').val();
    // do something with the value here...
});

如果出於某種原因仍要使用DOM遍歷，則可以使用closest()來獲取兩個元素最近的公共父級，然后使用find() ：

$('#btn-chat').click(function() {
    var inputVal = $(this).closest('.input-group').find('input').val();
    // do something with the value here...
});

如果頁面中有多個具有相同id屬性的元素，則您的HTML無效，您需要對其進行更改。 在這種情況下，請使用class屬性來標識和選擇元素。

Answer 2

$("#btn-chat").click(function(){
    var input_values = $(this).parent().parent().find("input").val();
    alert(input_values);
});

Answer 3

正如@RoryMcCrossan指出的那樣，如果您有多個具有相同id屬性的元素，則需要使用class屬性。

$(function() {
    $('.btn-chat').on('click', function() {
        var val = $(this).closest('.input-group').find('input.btn-input').val();
                  //OR $(this).parent().prev().val();
        console.log( val );
    });
});

 $(function() { $('.btn-chat').on('click', function() { var val = $(this).closest('.input-group').find('input.btn-input').val(); console.log( val ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="panel-footer"> <div class="input-group"> <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." /> <span class="input-group-btn"> <button class="btn btn-primary btn-sm btn-chat">Wyślij</button> </span> </div> </div> <div class="panel-footer"> <div class="input-group"> <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." /> <span class="input-group-btn"> <button class="btn btn-primary btn-sm btn-chat">Wyślij</button> </span> </div> </div> <div class="panel-footer"> <div class="input-group"> <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." /> <span class="input-group-btn"> <button class="btn btn-primary btn-sm btn-chat">Wyślij</button> </span> </div> </div>