Annexer une div, selon le bouton radio est vérifié

Question

Je voudrais l'utilisateur de sélectionner/vérifier un bouton radio (pour cet exemple je sens). Avec un bouton, vous pouvez ajouter des éléments à un autre div (barre latérale). Ce que je voudrais accomplir: En fonction de la vérification du radiobutton, je souhaite ajouter une autre image/div. Donc quand 'Left' est coché, je veux que le '.Left' div s'ajoute (au lieu de la valeur). Comment puis-je accomplir cela?

J'espère que vous pouvez m'aider. Je cherche une explication claire.

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

Si vous voulez mettre quelque chose au lieu de la valeur, la première chose qui vient à l'esprit est la suivante:

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


}); 

J'ai changé la première affectation $addDiv ajouter que le bouton Supprimer. Ensuite, s'il reste, j'ajoute la div et si c'est une autre, j'ajoute la valeur d'entrée.

En outre, vous aviez pas <div class="left"></div>

Vous pouvez le voir travailler here

Answer 2

votre violon lui manquait la left class div et faute de frappe dans appendTo vérifier ce violon ..

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

créé un left div et ajouté au sidebar