javascript - appenTo 之后 Html 被切断？

Question

我对编程和 Javascript/JQuery 比较陌生，所以请提供任何帮助。我正在为我们公司的新 Web 应用程序担任地址经理。我正在使用 WebApi 进行一些 AJAX 调用，并为应用程序位置管理器中某个位置内的每个“MailStop”填写数据。 MailStop 只是帮助某人在地址中找到一个位置...

            555 Cleveland Ave NW
            Apt. 3
mailstop => Upstairs, Kevin's Desk
            Canton, Ohio 44718

因此，在每个位置，您可以根据需要拥有任意数量的 MailStop。尽管如此，客户几乎不会使用超过几个。

我拥有解决这个问题所需的一切，但是当我使用 $.appendTo() 时，出现了问题。

正如您从上面看到的，元素已正确附加，但未显示。在我的代码中，我尝试使用 .scrollHeight 来增加面板的高度，但无论插入多少个 mailStop 元素，.scrollHeight 始终为 32px。我需要找到一种方法，将每个邮站的面板增加约 100 像素。下面是我的代码...

function getAjax(url) {
    return $.ajax({
        url: url
    });
}

function displayResults(data, addTo) {

    $.each(data, function (k, v) {
        $('<div class="mailStops">' +
            `<input type="text" class="form-control" readonly value="${v.MailStop1}" />` +
            `<input type="text" class="form-control" readonly value="${v.MailStop2}" />` +
            `<button class="btn btn-danger btn-block DeleteMailStop" value="${v.MailStopID}">Delete</button>` +
            '</div >').appendTo(addTo);
    });

}

var acc = document.getElementsByClassName("btnMailStop");
var i;


for (i = 0; i < acc.length; i++) {

    acc[i].onclick = function () {

        var LocId = this.value;
        this.classList.toggle("active");
        //var panel = $("#MailStopPanel" + LocId);
        var panel = document.getElementById("MailStopPanel" + LocId);
        if (panel.style.maxHeight != "0px") {
            //if panel is open remove elements and close it
            var removeStops = document.querySelectorAll(".mailStops");

            $.each(removeStops, function (k, element) {
                panel.removeChild(element);
            })
            panel.style.maxHeight = "0px";

        }
        else {
            //if panel is closed get AJAX data and append it to the panel
            var uri = '/api/MailStop/' + LocId;

            var promise = getAjax(uri);

            promise.then(data => displayResults(data, panel));

            //Need to increase the panel height and window height enough for all elements to be seen
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}

Answer 1

考虑使用 height 属性而不是scrollHeight，另外，考虑通过将高度设置为“初始”或“自动”以及 max-height 或 min-height 属性，让高度由内容控制。

在一般实践中，向 div 添加内容并还修改其高度通常是一个坏主意，除非您可以精确计算每个内容需要多少像素，并且每个内容都有非常精确的像素值。高度。