追加一個div取決於哪個單選按鈕被選中

Question

我想用戶選擇/檢查一個單選按鈕（在這個例子中我用方向）。使用按鈕，您可以將一些元素附加到另一個div（側欄）。

我想實現的： 根據所選的單選按鈕，我想要追加另一個圖像/ div。所以當'左'被選中時，我想'.Left'div附加（而不是值）。我怎樣才能做到這一點？

希望你能幫助我。我正在尋找一個明確的解釋。

HTML

<div> 
     <input type="text" name="itemtitle" id="itemtitle" value="Title" /> 
     <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> 

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

</div> 

JS

$('#addbutton').click(function() { 

    var $addDiv = $('<div></div>', { 
     'class': 'bluebox' 
    }).html($('#itemtitle').val() + ' ' + $('input[name="direction"]:checked').val() + '<input type="button" class="removebtn" value="." id="removebtn"/>'); 


    if ($('input[name="direction"]:checked').val() == 'Left') { 

     $('.Left').appenTo($addDiv); 

    } 

    $('#sidebar').append($addDiv); 


    $('.removebtn').live('click', function() { 
     $(this).parent().remove(); 


    }); 
    $('.bluebox').draggable({ 
     revert: true 
    }); 


}); 

JSFIDDLE

Answer 1

如果你想放的，而不是有價值的東西，想到的第一件事情是這樣的：

$('#addbutton').click(function() { 

    var $addDiv = $('<div></div>', { 
     'class': 'bluebox' 
    }).html('<input type="button" class="removebtn" value="." id="removebtn"/>'); 

    if ($('input[name="direction"]:checked').val() == 'Left') { 

     $('.Left').prependTo($addDiv).fadeIn(); 

    } 
    else{ 
      $addDiv.prepend($('#itemtitle').val() + ' ' + $('input[name="direction"]:checked').val()); 
    } 


    $('#sidebar').append($addDiv); 


    $('.removebtn').live('click', function() { 
    $(this).parent().remove(); 


    }); 

    $('.bluebox').draggable({ 
     revert: true 
    }); 


}); 

我已經改變了第一$addDiv分配只添加刪除按鈕。然後，如果它剩下我添加div，如果它是另一個我添加輸入值。

而且，你有沒有一個<div class="left"></div>

你可以看到它的工作here

Answer 2

你的提琴失蹤的left class div和appendTo 檢查此琴錯字..

http://jsfiddle.net/VbXuw/1/

創建了left div並附加到sidebar