0

入力値をdivに追加するappendbuttonを備えた入力フィールドがいくつかあります。このjQueryカラーピッカーのおかげで、どの色が選択されているかを「追跡」することもできます

$('#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();
});

あなたへの私の質問は：カラーピッカーでこれをどのように達成できますか？

4

1 に答える 1

1

最初に「avatarDiv」を追加し、適切な色を指定してから、それを div に追加する必要があります。最後のステップは、それをサイドバーに追加することです。

わかりやすくするために、2 つの変数に分けました。

$(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++;

  });
});
于 2012-06-18T15:32:41.900 に答える