Html在appenTo後切斷？

Question

我更新的編程和JavaScript/JQuery所以請任何幫助表示讚賞。 我正在爲我們公司的新WebApplication的地址經理工作。我使用WebApi來進行一些AJAX調用，併爲我的應用程序的位置管理器中的每個「MailStop」填充數據。一個MailStop只是幫助別人找到地址的內部點...

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

所以，在每一個位置，因爲你需要，你可以有很多MailStops。儘管客戶幾乎沒有使用過幾個。

我有我需要的一切幾乎爲這個問題工作，但是當我使用$ .appendTo（）時出錯了。

正如你可以從上面的元素越來越正確添加數據，但他們沒有看到顯示。在我的代碼中，我試圖使用.scrollHeight來增加面板的高度，但無論插入多少個mailStop元素，.scrollHeight總是32px。我需要找到一種方法來爲每個mailstop增加大約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屬性，也考慮具有高度是讓高度由內容控制「初始」或「自動」，也許最大 - 高度或最小高度屬性。

在一般的實踐中，添加的東西到一個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)); 
     } 
    }; 
}