Question

我试图通过点击按钮获取div中的元素值，并将div的值输入到输入框中。

我试过这个：

window.onload = function () {
  $('.DA').on('click', '.submit_btn', function () {
      var getinfo = $(this).val();
      $('#val_input').val(getinfo); 
  });
};

这是我的example.html

<input id="val_input">

<li class = 'CA'>
   <div class = 'DA'>
      <h1 id = 'HA'>name1</h1>
      <span class = 'SA'>info1-1</span>
      <span class = 'SB'>info1-2</span>
      <span class = 'SC'>info1-3</span>
      <button type = "submit" class = "submit_btn">submit</button>
   </div>
<li>
<li class = 'CA'>
   <div class = 'DA'>
      <h1 id = 'HA'>name2</h1>
      <span class = 'SA'>info2-1</span>
      <span class = 'SB'>info2-2</span>
      <span class = 'SC'>info2-3</span>
      <button type = "submit" class = "submit_btn">submit</button>
   </div>
<li>

...

我还尝试在输入框中输入一个值，如下所示：

   window.onload = function () {
      $('.DA').on('click', '.submit_btn', function () {
          var getinfo = $(".SA").val();
          $('#val_input').val(getinfo); 
        });
      };

但它没有工作我是JS和Jquery的新手，所以无法找到解决问题的方法。我错过了哪里......

Answer 1

您需要使用.text()代替.val()。您还需要当前单击的元素上下文来定位兄弟跨度文本：

    $('.DA').on('click', '.submit_btn', function () {
      var getinfo = $(this).prevAll(".SA").text();
      $('#val_input').val(getinfo); 
    });

Answer 2

＆＃13;

$(document).on('click', '.subimit_btn', function() {
  var getinfo = $(this).text();
  $('#val_input').attr('value', getinfo);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="val_input">

<li class = 'CA'>
   <div class = 'DA'>
      <h1 id = 'HA'>name1</h1>
      <span class = 'SA'>info1-1</span>
      <span class = 'SB'>info1-2</span>
      <span class = 'SC'>info1-3</span>
      <button type = "submit" class = "subimit_btn">submit</button>
   </div>
<li>
<li class = 'CA'>
   <div class = 'DA'>
      <h1 id = 'HA'>name2</h1>
      <span class = 'SA'>info2-1</span>
      <span class = 'SB'>info2-2</span>
      <span class = 'SC'>info2-3</span>
      <button type = "submit" class = "subimit">submit</button>
   </div>
<li>

＆＃13;

Answer 3

试试这个

check this link

<input id="val_input">

<li class= 'CA'>
   <div class= 'DA'>
      <h1 id = 'HA'>name2</h1>
      <span class= 'SA'>info2-1</span>
      <span class= 'SB'>info2-2</span>
      <span class= 'SC'>info2-3</span>
      <button type= "button" class="subimit">submit</button>
   </div>
<li>

$(document).ready(function(){
    $('.subimit').click(function(){
      var getinfo = $(this).prevAll(".SA").text();
      $('#val_input').val(getinfo); 
    });
});

-Jquery-使用一个按钮放置在同一个div中获取值

3 个答案: