Question

如何通过从单独的下拉列表中选择HEX代码来使用jQuery更改<div>的背景。

HTML

<select id="target">
  <option value="#c2c2c2">Grey</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
</select>

Answer 1

将更改事件附加到下拉选项。由于下拉列表的值可能是您的十六进制代码或颜色，您只需提取该值并直接在 css 调用中使用它。这是一个使用jQuery的例子。

<强>更新此外，还包含一个示例，该示例使用表格的值并响应.hover事件documented here。在这里，我从其#hoverTable中选择了一个表，然后选择了一个td单元格，然后将其拉到了$(this).html()并将其分配给我传入的变量bgChange新的解耦函数$(document).ready(function(){ // Function to change colors var bgChange = function (newColor) { $("body").css("background", newColor); return true; } $("#hoverTable td").hover(function(e){ var color = $(this).html(); bgChange(color); }, function(){ bgChange("#FFF"); }); $( "#target" ).change(function() { var color = $("#target").val(); // Val is your hex code $("body").css("background", color); }); });。要更改页面上的其他元素，只需更改bgChange和QED中的选择器。

JavaScript（jQuery）

<div class="row">
<table id="hoverTable" class="table" >
  <tr>
    <th>Name</th>
    <th>ColorCode</th>
    <th>Misc</th>
  </tr>
    <tr>
        <td>Bryce</td>
        <td>Blue</td>
        <td>Balloon</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Grey</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Corey</td>
        <td>Red</td>
        <td>Cheese</td>
    </tr>
</table>
</div> <!-- row -->

<select id="target">
  <option value="#c2c2c2">Grey</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
</select>

<强> HTML

{{1}}

根据十六进制代码的下拉列表更改div的背景颜色

1 个答案: