Question

我希望用户选择/检查radiobutton（对于此示例，我使用了方向）。使用按钮，您可以将一些元素附加到另一个div（侧边栏）。

我想要完成的事情：根据检查的radiobutton，我想要附加另一个图像/ div。因此，当选中“Left”时，我希望附加“.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

附加一个div，具体取决于检查哪个radiobutton

2 个答案: