2

ユーザーにラジオボタンを選択/チェックしてもらいたいです（この例では、道順を使用しました）。ボタンを使用すると、いくつかの要素を別の div (サイドバー) に追加できます。

私が達成したいこと：チェックされているラジオボタンに応じて、別の画像/ 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

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 に答える