根据单击循环中的哪个按钮填充字段

Question

我有一个使用高级自定义字段的自定义循环，它显示三个框，每个框都有内容。

如果选择框 1 中的按钮，我希望框 1 中的内容填充到输入中。

如果框 2 中的按钮已被选中，我希望框 2 中的内容填充到输入中，依此类推。

我的html如下：

<div class="row">
    <?php if( have_rows('event') ): while ( have_rows('event') ) : the_row(); ?>
        <div class="four">
            <div class="input"><?php the_sub_field('details'); ?></div>
            <a class="button btn" href="#contact">Make an appointment</a>
        </div>
    <?php endwhile; else : endif; ?>
</div>

<input id="output"></input>

我的 jQuery 是：

jQuery(document).ready(function($) {
    $(".btn").click(function(e) {
        $("#output").val($(".input").val());    
    });
});

我设法为一个盒子找到了可行的解决方案，但没有为循环找到可行的解决方案，我怀疑这可能与 .each() 有关，但我不确定。

谢谢。

Answer 1

您只需要获取单击按钮的同级输入。但是，您确实需要将您的 div class="input" 设为实际的 input 才能使 .val() 工作。否则，您将不得不使用.text() 来获取 div 中的文本。

jQuery(document).ready(function($) {
    $(".btn").click(function(e) {
        $("#output").val($(this).siblings('.input').val());    
    });
});

Answer 2

您的 jQuery 非常接近。

有两个问题：

1. 您正在尝试使用.val() 的div，它没有value - 它有text（或html），因此您需要使用.text()（或@987654322 @)。在你的情况下，我相信.text 是你所追求的。

2. 当您想要与单击的按钮相关的.input 时，如果 first .input 元素将值放入输入中。有几种方法可以做到这一点，但就您而言，最直接的方法是使用 .siblings。

   // Short-hand document ready (which is no-conflict safe, necessary in WP scripts)  
   jQuery(function($) {
       $(".btn").click(function(e) {
           // $(this) is this button - get the sibling .input element's text
           $("#output").val($(this).siblings(".input").text());    
       });
   });