附加一个 div，具体取决于选中的单选按钮答案

【问题标题】：Append a div, depending on which radiobutton is checked附加一个 div，具体取决于选中的单选按钮
【发布时间】：2012-12-19 11:04:16
【问题描述】：

我希望用户选择/选中一个单选按钮（在此示例中，我使用了方向）。使用按钮，您可以将一些元素附加到另一个 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>

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

【问题讨论】：

标签： jquery html checkbox append

【解决方案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

【讨论】：

非常感谢您的回答，但现在它仍然没有附加任何内容

【解决方案2】：

您的小提琴缺少left class div 和appendTo 中的错字检查这个小提琴..

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

创建了一个left div 并附加到sidebar

【讨论】：