Question

我是编程和Javascript / JQuery的新手，所以请任何帮助表示赞赏。我正在为我们公司的新WebApplication的地址经理工作。我正在使用WebApi进行一些AJAX调用，并为我的应用程序的位置管理器中的每个位置内的每个“MailStop”填写数据。 MailStop只是帮助有人找到地址内的一个地方......

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

因此，在每个位置，您可以根据需要拥有尽可能多的MailStop。虽然，客户几乎不会使用多个。

我有一些我需要的东西几乎可以解决这个问题，但是当我使用$ .appendTo（）时出现问题。

正如您从上面可以看到的那样，元素被正确附加但它们没有显示。在我的代码中，我试图使用.scrollHeight来增加面板的高度，但无论插入多少个mailStop元素，.scrollHeight总是32px。我需要找到一种方法来为每个邮件停止增加约100px的面板。以下是我的代码......

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，同时考虑让高度由内容控制，高度为＆＃34; initial＆＃34;或＆＃34; auto＆＃34;并且可能是最大高度或最小高度属性。

在一般做法中，将东西添加到div并也修改它的高度通常是一个坏主意，除非你可以准确计算出每个东西占用的像素数，以及每个东西有一个非常精确的高度。

Answer 2

这里只需要一些东西。感谢Felipe Valdes让齿轮转动，让我更接近解决方案。这是更新的Javascript。

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

function displayResults(data, addTo, panelID) {

    if (data.length < 1) {
        $('#MailStopPanel' + panelID).css('height', 35 + "px");
    }
    else {
        $('#MailStopPanel' + panelID).css('height', (data.length * 130) + "px");

        $.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.height != "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.height = "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, LocId));
        }
    };
}

在appenTo之后html被切断了吗？

2 个答案: