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>

jQuery获取以前的输入值

3 个答案: