Question

我有一些带有appendbutton的输入字段，它将输入值附加到div。感谢这个jQuery colorpicker，我也能够追踪＆＃39;选择哪种颜色

$('#color1').val()

现在，当单击附加按钮时，它会以div中的纯文本形式附加输入值。但我想要完成的是另一个小div（头像）出现在颜色选择器的所选颜色中。让我在JS中演示我的意思。

HTML：

<form>
    <div>
        <input type="text" name="price" id="price" value="price" />
        <input type="text" name="brand" id="brand" value="brand"/>
        <br/>
        <input type="radio" id="up" name="direction" value="up" />  up
        <input type="radio" id="down" name="direction" value="down" /> down
        <input type="radio" id="left" name="direction" value="left" />  left
        <input type="radio" id="right"name="direction" value="right" /> right
        <button id="addbutton">add it</button>
      </div>

</form>
      <div><label for="color1">Color 1</label>
<input id="color1" name="color1" type="text" value="#333399" /></div>


<div id="sidebar"><h1>sidebar</h1></div>

JS：

var counter = 0;
$(document).ready(function(){

$('#addbutton').click(function() {
    var $addDiv = $('#sidebar');
    $addDiv.append(
    $( '<div></div>', { id: 'item' } )
        .html( $( '#input1' ).val() + ' ' + $( '#input2' ).val() + ' ' + $('input[name="category"]:checked').val() + ' ' +("<div id="avatar" backgound="color from colorpicker"></div>")+ ' ' +$('#color1').val()));
   $('.removebtn').live('click', function() {
        $(this).parent().remove();
    });
    return false

});

$('#color1').colorPicker();
});

我的问题是：如何使用颜色选择器完成此操作？

Answer 1

你应首先附加'avatarDiv'并给它正确的颜色，然后将它追加到div。最后一步是将其附加到侧栏。

我将它分成两个变量，以表明：

$(document).ready(function(){
  var counter=0; //should not be in global namespace...
  $('#addbutton').click(function() {
      var $avatarDiv = $('<div>').css('background-color',$('#color1').val()).css('height','16px').css('width','16px').css('float','left');
      var $addDiv = $('<div>', { id: 'item'+counter } ).text('your input val').append($avatarDiv);
      $('#sidebar').append($addDiv);
   counter++;

  });
});

添加颜色选择器选择的背景颜色的div？

1 个答案: