PHP jQuery:Append() to tabs 正在复制内容，直到重新访问选项卡

Question

我在将内容附加到属于同一容器的 3 个选项卡时遇到问题。出于某种原因，当我将元素附加到每个选项卡的容器时，我在每个选项卡上都会得到一个重复项，直到我单击该选项卡并再次返回。

以下是我尝试执行此操作的示例。

制表符

<div class="tab-content">
<div class="tab-pane active" id="tabs1" role="tabpanel">
<div id="container1" class="widget">
</div>
</div>
<div class="tab-pane active" id="tabs2" role="tabpanel">
<div id="container2" class="widget">
</div>
</div>
<div class="tab-pane active" id="tabs3" role="tabpanel">
<div id="container3" class="widget">
</div>
</div>
</div>

数据和内容

$.ajax({
url: 'data.php',
type: 'post',
dataType: 'json',
data: {id: id},
success: function(res){
var len = res.length;
$("#container1").empty();
$("#container2").empty();
$("#container3").empty();
for( var i = 0; i<len; i++){
var content = res[i]['content'];
var isValid = res[i]['isValid']; //boolean
$('#container1').append('<div>'+content+'</div>'); //this tab includes all results
if(isValid){
$('#container2').append('<div>'+content+'</div>'); //this tab includes only valid results
}
if(!isValid){
$('#container3').append('<div>'+content+'</div>'); //this tab includes only invalid results
}
}
});

此示例指示所有数据都位于同一数组中，然后有条件地追加到每个容器。

因此，当我第一次访问每个选项卡时，我会看到以下内容。

"container1"显示所有内容，但它也会重复所有内容两次。(因此，如果我期望每个选项卡有 1 个结果，container1 应该显示 3 个结果，但显示 6 个(每个 2 个)。换句话说，它显示用于容器 1 的内容，但也显示用于容器 2 和容器 3 的内容。

"container2"显示">

container2"和"container3"中的内容，直到重新访问选项卡，然后显示正确的内容。

"container3"显示">

container2"和"container3"中的内容，直到重新访问选项卡，然后显示正确的内容。

当我重新访问每个选项卡时，我会看到每个选项卡的独特内容。

我尝试从不同的数组中提取数据(在服务器端将它们分开)，但仍然得到相同的最终结果。

我没有得到的是，当我重新访问选项卡时，重复项消失了。

提前感谢，

Answer 1

由于我没有您的选项卡控件的实现，我只能假设，但我认为这是因为您的所有选项卡都具有.active类，该类将同时显示所有三个选项卡。例如，如果您的列表中有 6 个项目，其中 2 个有效条目和 4 个无效条目，您将看到总共 12 个项目，但它们将显示在彼此下方的三个不同的DIV选项卡中。如果您的类.widget没有外部边框或其他分隔符，这可能看起来只是一个元素。

更改它，以便只有一个选项卡保持可见，例如"tab1"选项卡：

<div class="tab-content">
<div class="tab-pane active" id="tabs1" role="tabpanel">
<div id="container1" class="widget">
</div>
</div>
<div class="tab-pane" id="tabs2" role="tabpanel">
<div id="container2" class="widget">
</div>
</div>
<div class="tab-pane" id="tabs3" role="tabpanel">
<div id="container3" class="widget">
</div>
</div>
</div>