0

JQuery を使用して自分のサイトに html 要素を追加していますが、それらの配置が心配です。私がやろうとしていることは、写真で最も簡単に説明できるかもしれません。

大きな窓が2つと小さな窓が2つあります。大きなウィンドウ (モデル) は、フォーム (id #modelform) が送信された後、JQuery を使用して html の本文に追加されるものです。小さいウィンドウ (wald) は、wald フォーム (class .wald を使用) が送信された後に、html の本文に追加されるものです。各モデル ウィンドウには、独自の wald フォーム (Wald Test ボタン) があります。私が望むのは、.wald フォームの送信後に返される wald ウィンドウが、関連するモデル ウィンドウの下ではなく右側に表示されるようにすることです。

wald ウィンドウを html 本文に追加する代わりに、 $wald_element.appendTo( This wald form's contain window ) などのようなことをしたいと思いますか? これは可能ですか？

ここに画像の説明を入力

プロセスを説明する JQuery は次のとおりです。

    var $counter = 0

    //When the model form is submitted...
    $("#modelform").submit(function() {

        $counter++;

        //It takes the values from the form (#mymodel)
        //and posts the values via AJAX to '/estimate'...
        $.post('/estimate', {name: $("#mymodel").val()}, function(data) {

            //And the value returned from '/estimate' is appended to the html body.
            var $model_var = data['title']
            var $model_element = $('<div class="window">' + $model_var + '<form class="waldform" action="#" method="post"><input type="text" id="waldnum" value="' + $counter + '" style="display:none"/><input type="submit" value="Wald Test" /></form></div><br>');       

            $('body').append($model_element) ;

            //When a waldform is submitted...
            $(".waldform").submit(function() {

                //The value in the form (#waldnum), which corresponds to a specific
                //value (model) returned from '/estimate', is posted via AJAX to '/wald'
                $.post('/wald', {name: $(this).find('#waldnum').val()}, function(data) {

                    //And the value returned from '/wald'is appended to the html body
                    var $wald_var = data['title']
                    var $wald_element = $('<div class="wald">' + $wald_var + '</div><br>');

                    $("body").append($wald_element);

                                });

                            return false ;

                            });

                       });

                    $(".waldform").off() ;

                return false ;

                });
4

1 に答える 1

1

event.target関数を使用して送信されたフォームを見つけ、submit関数を使用.parent()して DOM をトラバースし、Wald 要素を追加する要素 (この場合はウィンドウ) を見つけます。

$('form').submit(function(event) {
    ...
    $(event.target).parent().append($wald_element);
    ...
});

JSFiddle デモ

ただし、表示方法は HTML と CSS の構造によって異なります。これらを編集してdiv、メイン ウィンドウを含む に項目が追加されるようにすることができます。offsetまたは、これらのウィンドウが移動可能で、絶対配置を使用している場合は、Model 要素の に基づいて新しい Wald 要素の位置を設定できます。

$wald_element.css({
        position: 'absolute', 
        top: target.offset().top,
        left: target.offset().left + target.width()
    });

JSFiddle デモ

この例では、jQuery UI を使用して要素を移動できるようにしていますが、他のものを使用している場合やウィンドウが移動できない場合でも、機能するはずです。

于 2013-10-31T18:23:54.793 に答える