Question

我有相同的HTML代码，但按钮的ID不同现在我想获得最接近点击按钮的输入字段的值。

这是我的HTML代码：

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
    <span class="input-group-btn">
    <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="38">Send</button>
    </span>

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
    <span class="input-group-btn">
    <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="39">Send</button>
    </span>

这是我的jQuery代码：

$(document).on('click', '.btn_chat', function (e) {
    alert("Button id: "+$(this).val());
    alert($(this).closest('input .message').val());
});

它将给出按钮值，但输入值未定义

Answer 1

首先，您应该删除重复的id属性，并使用类来对您的元素进行分组。

然后，您可以使用closest()将DOM遍历到最近的父span，然后使用prev()获取input。试试这个：

$(document).on('click', '.btn_chat', function (e) {
    var $input = $(this).closest('span').prev('input.message');
    alert($input.val());
});

请注意删除选择器中input和.message之间的空格，因为我们正在单个元素上查找这两个属性。

Answer 2

ID和CLASS之间应该存在差异你指的是两个元素中的类.btn-chat。请记住ID应该是唯一的，以便处理程序识别它。

Answer 3

你重复了你的身份证件

但是一个简单的jquery可以给你答案：

$(".btn_chat").click(function(){
    alert($(this).parents('.input-group').find('input').val());
});

Working Fiddle

单击按钮时如何获取输入值

3 个答案: