我正在創建一個小型登錄頁面，最后將選擇一個隨機城市，存盤在用戶輸入的選項之間，選擇下一次旅行的目的地。當用戶在輸入欄位中輸入城市名稱時，一切正常，在有序串列中創建一個新的串列元素，并將名稱推送到陣列中（稍后隨機選擇一個）。但是，當我嘗試使用 close 函式洗掉城市名稱時，串列元素正確消失，但在陣列內部，不是洗掉所選專案，而是洗掉位置 0 上的物件。我想弄清楚是什么我的代碼有問題。下面是我到目前為止撰寫的代碼：
const submitBtn = document.querySelector(".addCity");
const cityList = document.querySelector(".city-ol");
let createdLi = document.getElementsByTagName("li");
const lis = document.querySelectorAll(".city-ol li");
let array = [];
submitBtn.addEventListener("click", newElement);
function newElement() {
let li = document.createElement("li");
let inputValue = document.querySelector(".inputTextField");
let t = document.createTextNode(inputValue.value);
li.appendChild(t);
if (inputValue.value === "") {
alert(
"Attenzione, il campo di inserimento della città è vuoto. Inserire una città."
);
} else {
cityList.appendChild(li);
array.push(inputValue.value);
inputValue.value = "";
}
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i ) {
close[i].onclick = function() {
let div = this.parentElement;
div.style.display = "none";
array.splice(close[i], 1);
};
};
};body {
font-family: "Poppins", sans-serif;
height: 900px;
text-align: center;
}
#landing-section {
height: 100%;
}
.container {
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 5px;
justify-content: center;
align-content: center;
}
.header {
/* background-color: #935ee9; */
grid-column: 1 / -1;
border: 1px solid #000000;
}
.main-head {
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 0;
}
.main-para {
font-size: 1.2rem;
margin-top: 10px;
}
.cityInput {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #a8d051; */
grid-column: 1 / 2;
grid-row: 2 / 3;
border: 1px solid #000000;
}
.inputTextField {
width: 200px;
}
.cityList {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #a98649; */
grid-column: 1 / 2;
grid-row: 3 / -1;
width: 100%;
border: 1px solid #000000;
}
.city-ol {
font-size: 1.5rem;
width: 100%;
}
.city-ol li:nth-child(odd) {
background: #f9f9f9;
}
li {
margin: 5px 20px;
}
.close {
position: relative;
top: 3px;
float: right;
}
.close:hover {
background-color: #DCDCDC;
color: white;
}
.cityImage {
/* background-color: #14d50e; */
grid-column: 2 / -1;
grid-row: 2 / -1;
border: 1px solid #000000;
}<section id="landing-section">
<div class="container">
<div class="header">
<h1 class="main-head">Make That Trip</h1>
<p class="main-para">Are we ready to choose our next trip?</p>
</div>
<div class="cityInput">
<input class="inputTextField" type="text" value="" data-type="city" placeholder="Inserisci la meta">
<button class="addCity">Aggiungi</button>
</div>
<div class="cityList">
<table>
<ol class="city-ol">
</ol>
</table>
</div>
<div class="cityImage">City Image</div>
</div>
</section>uj5u.com熱心網友回復：
問題修復可以有兩種方式
- 當您添加任何新元素時，dom 上的所有“關閉”都會添加到 close[]
Here element is present on DOM, Which get audited during add Element
let div = this.parentElement;
div.style.display = "none";
FIX: Remove it from DOM
let elm = this.parentElement;
elm.remove();
- 在回圈執行期間 i 變數將遞增為 1 2 3... 但在函式執行期間它不會相同
FIX : Delecare i using let
for (let i = 0; i < close.length; i ) {
uj5u.com熱心網友回復：
感謝您的所有回答，我能夠找出并解決問題，我將在下面解釋：
在這里，我隔離了沒有跨度的串列的文本內容，以便它與陣列物件完全匹配
let textNode = div.childNodes[0], text = textNode.textContent;在這里，最后，我將 array.indexOf() 設定為等于上面的孤立文本，然后我使用 if 陳述句進行了檢查，如果 index 的值大于 -1，則觸發 array.splice （） 方法
let index = array.indexOf(text); if (index > -1) { array.splice(index, 1); };
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338449.html
標籤：javascript 数组 功能 循环