2

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

4

2 回答 2

2

如果你想放一些东西而不是值，首先想到的是：

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

你可以看到它在这里工作

于 2012-12-19T11:09:42.747 回答
2

你的小提琴在检查这个小提琴时丢失了left class div和错字appendTo ..

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

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

于 2012-12-19T11:12:25.507 回答