0

我通过 JQuery 将 html 元素附加到我的网站，但我担心它们的位置。我正在尝试做的事情可能最容易用图片来解释。

我有两个大窗户和两个小窗户。在我的表单（带有 id #modelform）提交后，大窗口（模型）是用 JQuery 附加到我的 html 正文的。较小的窗口（walds）是在提交 wald 表单（类 .wald）后附加到我的 html 正文的内容。每个模型窗口都有自己的 wald 表格（按钮 Wald Test）。我想要的是在提交 .wald 表单后返回的 wald 窗口显示在其关联模型窗口的右侧，而不是在其下方。

我不想将 wald 窗口附加到 html 正文，我想做一些类似 $wald_element.appendTo( This wald form's contains 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包含主窗口的内容中。或者，如果这些窗口是可移动的并且您使用的是绝对定位，您可以根据offsetModel 元素的 设置新 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 回答