jquery - PHP jQuery：Append() 到选项卡正在复制内容，直到重新访问选项卡

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 个）。换句话说，它显示的是用于 container1 的内容，也显示了用于 container2 和 container3 的内容.

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

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

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

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

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

提前致谢，

标签： jqueryhtmlajax

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>