我正在做一個附帶專案，我偶然發現了一個我不知道如何解決的問題。我仍然處于基礎和初學者級別的 JS 上。我正在嘗試開發票務系統，一次解決一個問題，因為我想到了我希望事情如何運作。我遇到的問題是，我希望新工單創建中的每個新列都具有不同的值——這些值都是從代理人在“新工單”模式中填寫的表格中提取的——但它們都被分配了表單中最后一個輸入的值，即問題描述表單。我還沒有想出一種方法來匹配ticketColValues和ticketColDivs值，以便正確的值進入正確的 div。
這段代碼可能看起來很奇怪......就像我說的那樣，我是一個初學者，我只是想看看我是否能找到讓事情發揮作用的方法。如果有人對如何優化代碼有任何想法，我也對此持開放態度。我試圖附上大部分相關代碼，我的 CSS 并不是最干凈的，所以我確定我錯過了一些東西，但 JS 是最大的問題。
感謝您的任何幫助！
const submitButton = document.getElementById('submit-ticket-button');
let ticketIdBase = 1; //should update every time a new ticket is created
submitButton.addEventListener('click', () => {
//time constants for timestamping
const current = new Date();
const currentTime = current.toLocaleTimeString([], {hour: 'numeric', minute: '2-digit'});
const timeStamp = `${current.getMonth()}/${current.getDate()}/${current.getFullYear()} ${currentTime}`;
//grab form values
const ticketId = ticketIdBase;
const dateTimeEntered = timeStamp;
const enteredBy = 'Name Here';
const problemType = document.getElementById('problem-type').value;
const callerName = document.getElementById('caller-name').value;
const callerDept = document.getElementById('caller-ou').value;
const callerRoom = document.getElementById('caller-room').value;
const callerExt = document.getElementById('caller-ext').value;
const assignedTo = document.getElementById('ticket-assigned-to').value;
const dateAssigned = timeStamp;
const problemDesc = document.getElementById('problem-desc').value;
ticketColValues = [ticketId, dateTimeEntered, enteredBy, problemType, callerName, callerDept, callerRoom, callerExt, assignedTo, dateAssigned, problemDesc]
//existing elements constants
const ticketGrid = document.getElementById('tickets-grid');
//new element constants
const newTicketRow = document.createElement('div');
const col1 = document.createElement('div');
const col2 = document.createElement('div');
const col3 = document.createElement('div');
const col4 = document.createElement('div');
const col5 = document.createElement('div');
const col6 = document.createElement('div');
const col7 = document.createElement('div');
const col8 = document.createElement('div');
const col9 = document.createElement('div');
const col10 = document.createElement('div');
const col11 = document.createElement('div');
ticketColDivs = [col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11];
ticketGrid.append(newTicketRow);
for (x=0; x<11; x ) {
newTicketRow.append(ticketColDivs[x]);
ticketColDivs.forEach(col => {
col.innerText = ticketColValues[x];//need to match col array # with value array #
});
console.log(x);
};
newTicketModal.classList.remove('active');
overlay.classList.remove('active');
ticketIdBase ;
});.header, .functions-bar, .content-container, #tickets-header, .ticket-header-col-container, .footer, .main-nav, .banner, .header-buttons, #header-left, #tickets-grid > div, #new-ticket-form {
display: flex;
}
.ticket-header-col-container, .ticket-item-col-container {
padding: 0 1em 0 1em;
}
.ticket-header-col-container {
justify-content: space-between;
}
#ticket-id-header, /*#ticket-id-number*/ #tickets-grid div div:first-child {
width: 3%;
}
#date-time-header, /*#ticket-date-time*/ #tickets-grid div div:nth-child(2) {
width: 10%;
}
#entered-by-header, /*#ticket-entered-by*/ #tickets-grid div div:nth-child(3) {
width: 10%;
}
#problem-type-header, /*#ticket-problem-type*/ #tickets-grid div div:nth-child(4) {
width: 7%;
}
#caller-name-header, /*#ticket-caller-name*/ #tickets-grid div div:nth-child(5) {
width: 10%;
}
#caller-dept-header, #tickets-grid div div:nth-child(6) {
width: 5%;
}
#caller-location-header, /*#ticket-caller-location*/ #tickets-grid div div:nth-child(7) {
width: 7%;
}
#caller-ext-header, /*#ticket-caller-ext*/ #tickets-grid div div:nth-child(8) {
width: 3%;
}
#assigned-to-header, /*#ticket-assigned-to*/ #tickets-grid div div:nth-child(9) {
width: 10%;
}
#date-assigned-header, /*#ticket-assigned-date*/ #tickets-grid div div:nth-child(10) {
width: 10%;
}
#problem-desc-header, /*#ticket-problem-desc*/ #tickets-grid div div:nth-child(11) {
width: 30%;
}<div id="tickets-grid">
<div class="new-ticket">
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
<div class="ticket-item-col-container" id="">
<p>test</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
僅根據收到的值創建新行怎么樣？您現在創建了很多手動行，最后您會重復很多專案。
所以在你有這個的前提下，它們的順序是正確的：
ticketColValues = [ticketId, dateTimeEntered, enteredBy, problemType, callerName, callerDept, callerRoom, callerExt, assignedTo, dateAssigned, problemDesc]
那么為什么不只是回圈ticketColValues并動態創建行來設定值呢？
const container = document.getElementById('container');
const ticketColValues = ['ticketId', 'dateTimeEntered', 'enteredBy', 'problemType', 'callerName', 'callerDept', 'callerRoom', 'callerExt', 'assignedTo', 'dateAssigned', 'problemDesc'];
const newRow = ticketColValues.reduce( ( targetElement, value ) => {
const row = document.createElement('div');
row.innerHTML = value;
targetElement.appendChild( row );
return targetElement;
}, document.createElement('div') );
container.appendChild( newRow );<div id="container"></div>在這種情況下，我使用了 reduce，但一個簡單的 for 回圈也可以。除非有特定原因要手動創建所有列？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494993.html
標籤：javascript html css 弹性盒 唯一值
上一篇：添加三元運算子而不是條件