让线性渐变在 jQuery 中工作
Posted
技术标签:
【中文标题】让线性渐变在 jQuery 中工作【英文标题】:Getting linear-gradient to work in jQuery 【发布时间】:2021-09-08 14:39:40 【问题描述】:有没有办法?我很难让我的代码工作,获取隐藏的输入值并通过内联 CSS 将它们应用于 div。
我的代码:
jQuery(document).ready(function ($)
$(document).on( "click", '#update .acf-button-group', function()
var color1 = $('#color1 input').val()
var color2 = $('#color2 input').val()
$("#output .acf-input").css("background": "linear-gradient(top, (color1) 0%, (color2) 100%)");
);
);
#output .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="#0779bf">
</div>
<div id="color2">
<input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id ="output">
<div class="acf-input"></div>
</div>
<button id="update">Update</button>
【问题讨论】:
【参考方案1】:您需要使用to top
而不是top
。
另外,您需要使用`
和$
传递变量。
另外,$(document).on( "click", '#update .acf-button-group'
你应该传递一个元素 $("#update")
而不是 '#update .acf-button-group'
。
全部修复后,它应该可以工作。
jQuery(document).ready(function ($)
$(document).on("click", $("#update"), function ()
var color1 = $("#color1 input").val();
var color2 = $("#color2 input").val();
//console.log(`linear-gradient(to top, $color1 0%, $color2 100%)`);
$("#output .acf-input").css(
background: `linear-gradient(to top, $color1 0%, $color2 100%)`,
);
);
);
//
#output .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="#0779bf">
</div>
<div id="color2">
<input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id ="output">
<div class="acf-input">xxxxxx</div>
</div>
<button id="update">Update</button>
【讨论】:
【参考方案2】:您可以使用linear-gradient(to top,$color1 0%, $color2 100%)
,其中 color1 和 color2 将具有输入值,然后通过 css 在您的 acf-input
中设置它。
演示代码:
jQuery(document).ready(function($)
$(document).on("click", '#update', function()
var color1 = $('#color1 input').val()
var color2 = $('#color2 input').val()
var colors = `linear-gradient(to top,$color1 0%, $color2 100%)`;
console.log(colors)
$("#output .acf-input").css(
"background":colors
);
);
);
#output .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="#0779bf">
</div>
<div id="color2">
<input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id="output">
<div class="acf-input"></div>
</div>
<button id="update">Update</button>
【讨论】:
以上是关于让线性渐变在 jQuery 中工作的主要内容,如果未能解决你的问题,请参考以下文章