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

Posted 2023-03-05

【中文标题】根据单击循环中的哪个按钮填充字段

【英文标题】：Populate field depending on which button in a loop has been clicked

【发布时间】：2017-03-15 23:25:04

【问题描述】：

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

如果选择框 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() 有关，但我不确定。

谢谢。

【问题讨论】：

如果.input 是一个div，那么.val() 是如何工作的？

【参考方案1】：

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

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

【讨论】：

@cale_b 因此，“你确实需要让你的div class="input" an actual input` 让.val() 工作。”一个 div 可以有一个值，但这不是你通常会做的事情。

@Gavin value 不是 <div> 元素的有效属性

@j08691 如果您指的是我的回答，您应该在代码之前阅读实际文本。如果您指的是我的评论，我知道它无效，但它确实有效。

【参考方案2】：

您的 jQuery 非常接近。

有两个问题：

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

当您想要与单击的按钮相关的.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());    
    );
);

【讨论】：

非常感谢！我还在学习 jQuery，但你解释的方式对我来说很有意义，而且很有魅力！非常感谢您的帮助！ :)