获取最近按钮的值

Question

这是我的html代码

<div class="panel-footer">
<div class="input-group">
<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="79">Send</button>
</span>
</div>
<div class="input-group">
<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="80">Send</button>
</span>
</div>
</div>

这是我的jquery代码

$(document).on('keypress', '.message', function (e) {
    if (e.which == 13) {
    var msg = $(this).val();
    var id = $(this).closest('span').next('button.btn_chat').val();
    alert(msg);
    alert(id);
}
e.preventDefault();
}); 

卡在id上，总是显示未定义

如何获取button value

Answer 1

我已经插入了代码。这里是id没有给出undefined

$(document).on('keypress', '.message', function (e) {
    if (e.which == 13) {
    var msg = $(this).val();
    var id = $(this).next('span').find('button.btn_chat').val();
    alert(msg);
    alert(id);
}
e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-footer">
  <div class="input-group">
    <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="79">Send</button>
</span>
  </div>
  <div class="input-group">
    <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="80">Send</button>
</span>
  </div>
</div>

Answer 2

span是下一个兄弟，按钮是span的后代，所以使用close和next将不起作用。

The nearest()用于查找祖先元素，next()用于查找下一个兄弟元素。

在您的例子中，您应该使用。next()来查找span，并使用。find()来查找后代按钮

var id = $(this).next('span').find('button.btn_chat').val();

演示:小提琴

---

另一个更简单的解决方案是使用data-*属性将值存储在输入元素本身中，如

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" data-id="79">

然后

var id = $(this).data('id');

Answer 3

$(this).closest('span')将搜索文本框最近的父span标签，而不是您需要相邻的span标签。尝试使用next()和find():

$(function() {
  $('input:text.message').on('keypress', function(e) {
    if (13 !== e.which) return;
    var btn = $(this).next().find('.btn_chat');
    console.log(this.value, btn.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-footer">
  <div class="input-group">
    <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="79">Send</button>
</span>
  </div>
  <div class="input-group">
    <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="80">Send</button>
</span>
  </div>
</div>

Answer 4

尝试使用美元(这).parent () .closest(跨度). next (button.btn_chat) .val ();