我正在創建動態標簽。我目前面臨兩個問題：
- 當我單擊 span x洗掉當前選項卡時，它會洗掉我的所有選項卡。
- 當我獲取陣列資料時，它總是只獲取第一個選項卡資料。
誰能幫我這個？我已經嘗試了很多方法，但我仍然無法得到我想要的結果。這是我的小提琴Dynamic Tabs。
目前，當有兩個選項卡“2023”和“2025”時，第二個問題的陣列結果如下所示：
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2023"
}]
我的預期結果是：
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2025"
}]
$(document).ready(function() {
addTab();
});
$('#add_tab').click(function() {
addTab()
});
//delete current tab
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() nextTab;
// create the tab
$('<a href="#tab-' date '" data-toggle="tab">' date '</a><span> x </span>').appendTo('#tabs');
// create the tab content
var html = "";
html = '<div id="tab-' date '">';
html = '<label><b>Year: </b></label>';
html = '<input type="text" value="' date '">';
html = '<label><b>January: </b></label>';
html = '<input type="number" value="1">';
html = '<label><b>February: </b></label>';
html = '<input type="number" value="1">';
html = '</div>';
//append to tab-content
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}
//get array
$(document).on('click', '#btnGetArray', function(e) {
var array = []
$(".monthSettings").each(function() {
let detail = {
Year: $(".txtYear").val() || 0,
January: $(".txtJanuary").val() || 0,
February: $(".txtFebruary").val() || 0,
}
array.push(detail)
console.log(array)
});
});@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
<a href="#" class="add-contact" id="add_tab"> Add Year</a>
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>uj5u.com熱心網友回復：
問題是因為您用于檢索.txtYear,的選擇.txtJanuary器.txtFebruary只會查看集合中第一個元素的值，無論它找到多少。
要更正此問題，您可以使用find()父元素（您可以從each()回圈中參考）來檢索該迭代中的子元素。
更進一步，您可以通過使用map()而不是each()構建陣列來簡化邏輯，但使用find()保持不變。
此外，還可以對代碼進行一些其他改進，例如確保所有事件處理程式都在document.ready其中，并使用模板文字使 HTML 字串連接更易于閱讀。
jQuery($ => {
$('#add_tab').on('click', addTab);
addTab();
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
$(document).on('click', '#btnGetArray', e => {
var array = $(".monthSettings").map((i, container) => ({
Year: $(container).find('.txtYear').val() || 0,
January: $(container).find('.txtJanuary').val() || 0,
February: $(container).find('.txtFebruary').val() || 0,
})).get();
console.log(array);
});
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() nextTab;
$(`<a href="#tab-${date}" data-toggle="tab">${date}</a><span> x </span>`).appendTo('#tabs');
var html = `
<div id="tab-${date}">
<label><b>Year: </b></label>
<input type="text" value="${date}" />
<label><b>January: </b></label>
<input type="number" value="1" />
<label><b>February: </b></label>
<input type="number" value="1" />
</div>`
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
<a href="#" class="add-contact" id="add_tab"> Add Year</a>
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/477545.html