javascript - 将拾色器选择应用于 Div 字体

Question

1. 我如何将从颜色选择器中选择的颜色应用到这些 div:#header、#subHeader、#button？

2. 如何隐藏 div #button 的边框，直到用户将文本输入 <input id="text3" class="textInput">

$(document).ready(function(){
    var div1 = $('#header')[0];

    $('#text1').bind('keyup change', function() {
        div1.innerHTML = this.value;
    }); 

    var div2 = $('#subHeader')[0];

    $('#text2').bind('keyup change', function() {
        div2.innerHTML = this.value;
    });

    var div3 = $('#button')[0];

    $('#text3').bind('keyup change', function() {
        div3.innerHTML = this.value;
    });
});


$(".basic").spectrum();
$(".override").spectrum({
    color: "yellow"
});
$(".startEmpty").spectrum({
    allowEmpty: true
});

.wrapper {
  padding: 10px;
  border: 2px solid black;
}

h2 {
  margin: 20px 0 5px;
  font-size: 16px;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
}

#header {
  font-size: 60px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
  margin: 10px 0;
  padding: 20px;
}

#subHeader {
  font-size: 24px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 300;
  margin: 10px 0;
  padding: 20px;
  display: block;
}

#button {
  font-size: 16px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
  margin: 30px 0;
  padding: 16px 24px;
  border: 2px solid #000;
  border-radius: 3px;
  text-align: center;
}

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>

<div class="wrapper">
<div id="header"></div> 
<div id="subHeader"></div>
<div id="button"></div>
</div>

<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

Answer 1

这将更改您的#subHeader 颜色。

$(document).ready(function(){
    var div1 = $('#header')[0];

    $('#text1').bind('keyup change', function() {
        div1.innerHTML = this.value;
    }); 

    var div2 = $('#subHeader')[0];

    $('#text2').bind('keyup change', function() {
        div2.innerHTML = this.value;
    });

    var div3 = $('#button')[0];

    $('#text3').bind('keyup change', function() {
        div3.innerHTML = this.value;
        if(this.value.length > 0) {
            $('#button').css('display', 'block')
        } else {
           $('#button').css('display', 'none')
        }
    });
});


$(".basic").spectrum({
   change: function(color) {
       console.log(color.toHexString());
       $('#subHeader').css('color',color.toHexString());
       var s = '2px solid ' + color.toHexString();
       $('#button').css('border', s);
}
});
$(".override").spectrum({
    color: "yellow"
});
$(".startEmpty").spectrum({
    allowEmpty: true
});

.wrapper {
  padding: 10px;
  border: 2px solid black;
}

h2 {
  margin: 20px 0 5px;
  font-size: 16px;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
}

#header {
  font-size: 60px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
  margin: 10px 0;
  padding: 20px;
}

#subHeader {
  font-size: 24px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 300;
  margin: 10px 0;
  padding: 20px;
  display: block;
}

#button {
  display:none;
  font-size: 16px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
  margin: 30px 0;
  padding: 16px 24px;
  border: 2px solid #000;
  border-radius: 3px;
  text-align: center;
}

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>

<div class="wrapper">
<div id="header"></div> 
<div id="subHeader"></div>
<div id="button"></div>
</div>

<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />