让线性渐变在 jQuery 中工作

Posted 2023-03-25

【中文标题】让线性渐变在 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>