jQuery输入值div id和更改颜色

Question

如何使用JQuery通过id更改颜色？ 你能救我吗？

样品：

我们可以用jQuery做到这一点吗？

样品：

div {
    width:20%;
    height:50px;
    background:red;
    position: relative;
    float: left;
    margin: 10px;
    }

<div id="box1">BOX1</div>
        <div id="box2">BOX2</div>
        <div id="box3">BOX3</div>
        <div id="box4">BOX4</div>
        <div id="box5">BOX5</div>
        
        <table><tr><td>
        <select class="selectColor" name="option">
      <option value="1">BLUE</option>
      <option value="2">BLACK</option>
      <option value="3">YELLOW</option>
    </select>
        <input type="text" name="cc" placeholder="Div ID"/><br/>
        <input type="button" onClick="colorPin()" value="CHANGE"/>
        
        </td></tr></table>

div颜色变化

Answer 1

您可以使用此代码：

function colorPin(){
  var divid = $("[name=cc]").val()
  var color = $(".selectColor option:selected").text()
  $("#" + divid).css("background",color)
}

这将采用所选颜色，并使用您在输入中输入的输入将其应用于div。

<强>演示

＆＃13;

＆＃13;

function colorPin(){
  var divid = $("[name=cc]").val()
  var color = $(".selectColor option:selected").text()
  $("#" + divid).css("background",color)
} 

＆＃13;

div {
  width: 20%;
  height: 50px;
  background: red;
  position: relative;
  float: left;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1">BOX1</div>
<div id="box2">BOX2</div>
<div id="box3">BOX3</div>
<div id="box4">BOX4</div>
<div id="box5">BOX5</div>

<table>
  <tr>
    <td>
      <select class="selectColor" name="option">
      <option value="1">BLUE</option>
      <option value="2">BLACK</option>
      <option value="3">YELLOW</option>
    </select>
      <input type="text" name="cc" placeholder="Div ID" /><br/>
      <input type="button" onClick="colorPin()" value="CHANGE" />

    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;