如何克隆隐藏输入的值并附加到另一个 div?
Posted
技术标签:
【中文标题】如何克隆隐藏输入的值并附加到另一个 div?【英文标题】:How to clone the value of a hidden input and append to another div? 【发布时间】:2021-09-08 12:02:46 【问题描述】:有没有办法获取隐藏 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>
【问题讨论】:
【参考方案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>
【讨论】:
这是完美的。我没想过要这样做。谢谢!【参考方案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?的主要内容,如果未能解决你的问题,请参考以下文章
获取 textarea 值并添加 br 和空格 - JQuery