在jQuery中使用线性梯度

Question

有没有一种方法可以让线性梯度在jQuery中工作？我很难让我的代码处理隐藏的输入值，并通过内联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>

Answer 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>

Answer 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>