在按钮上单击将 div 内部 html 分配给输入字段值

Question

我想要的是当有人点击按钮时，将电话号码设置为输入值。块是一个循环，其中出现不同的电子邮件和电话号码。如果某个特定块中的某个单击仅从该块获取电话号码。谢谢。

<div class="block">
     <div class="phone"><span>+1234567</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<div class="block">
     <div class="phone"><span>+7696686</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<div class="block">
     <div class="phone"><span>[phone]</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<input type="text" value="" id="phone">

这是我的代码：

jQuery(document).ready(function() {
    jQuery(".block button").click(function() {
        var contents = jQuery(this).find(".phone span").text();
        jQuery("#phone").val(contents);
    });
});

Answer 1

你标记了jQuery，所以我假设你可以使用jQuery接收答案。尝试类似以下内容的操作：

$('button').click(function(){
   var phoneNumber = $(this).closest('.phone').find('span').text();
});

Answer 2

试试这个-

jQuery(document).ready(function($) {
   $(".block").each(function() {
        $(this).find('button').click(function(){
          var contents = $(this).parents('.block').find('.phone span').text();
          $("#phone").val(contents);
        });        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
     <div class="phone"><span>+1234567</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<div class="block">
     <div class="phone"><span>+7696686</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<div class="block">
     <div class="phone"><span>[phone]</span></div>
     <div class="email">
          <span>[e-mail]</span>
          <button>CLick</button>
     </div>
</div>
<input type="text" value="" id="phone">