如何克隆隐藏输入的值并附加到另一个 div？

Question

有没有办法获取隐藏 div 的值并将该值克隆到另一个 div？我在 ACF 选项页面中有一个颜色选择器，我正在寻找一种方法来显示该颜色在另一个 div.

中的样子

换句话说，如果隐藏输入的值有#2b0059，它会获取该值并将其复制到另一个div。

到目前为止我的代码：

jQuery(document).ready(function ($) {
    $(document).on( "click", '#update', function() {      $("#color1").clone().appendTo("#output .acf-input")
    });
});

.acf-input {height:100px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>

Answer 1

看起来您实际上并不需要 clone 它，那么获取值并将 css 背景颜色添加到 div 怎么样？
像这样：

jQuery(document).ready(function ($) {
    $(document).on( "click", '#update', function() {
      $('.acf-input').css({
        backgroundColor: $('#color1 input').val()
      })
    });
});

.acf-input {height:100px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>

Answer 2

这很简单，你只需要一个合适的选择器。

jQuery(document).ready(function ($) {
     
    $(document).on( "click", '#update', function() {   
      var clonedObj=$("#color1 input").clone();
      $("#output .acf-input").append(clonedObj);
      console.log($(".acf-input").html());
      alert("cloned")
    });
});

.acf-input {height:100px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
  <input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>

</div>
<button id="update">Update</button>

如何克隆隐藏输入的值并附加到另一个 div？

How to clone the value of a hidden input and append to another div?

javascript

jquery

wordpress

advanced-custom-fields