javascript - 我的 slider 只显示第一个和第三个 slider ，但不显示表格的第二个和第四个 slider

Question

我制作了一个简单的 slider ，它适用于普通表格，但是当我尝试将该 slider 用于我的自定义 Bootstrap 表格时，只有第一个、第三个 slider 出现，而不是第二个和第四个。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
 showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
console.log("len "+x.length);
if (n > x.length) {

  slideIndex = 1;
}    
if (n < 1) {
   slideIndex = x.length;
 }
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";  
}
 x[slideIndex-1].style.display = "block";  
 }

这是html代码:

<div class="w3-content w3-display-container">
    <div class="mySlides">

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-body">
                <h4 class="m-b-30 m-t-0">Q'3</h4>
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table table-hover">
                            <thead>
                                    <tr>
                                            <th>Time Period</th>
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td># of Project<br>Completed</td>
                                            <td>20</td>                                                                </td>
                                            <td>17</td>
                                            <td>15</td>
                                            <td>52</td>
                                        </tr>
                                        <tr>
                                            <td>Total <br>Phases</td>
                                            <td>14</td>
                                            <td>29</td>
                                            <td>23</td>
                                            <td>74</td>
                                        </tr>
                                        <tr>
                                            <td># Feedback <br>Received</td>
                                            <td>12</td>
                                            <td>7</td>
                                            <td>2</td>
                                            <td>21</td>
                                        </tr>
                                        <tr>
                                            <td>Adiva <br>Incurred (hrs)</td>
                                            <td>927</td>
                                            <td>965</td>
                                            <td>636</td>
                                            <td>2528</td>
                                        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    </div>

 <button class="w3-button w3-black w3-display-left" 
 onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" 
   onclick="plusDivs(1)">&#10095;</button>
  </div>

我只给出了一个输入文件。将添加更多 3 个类似的表，但将其添加到我的类(class)后，只显示第 1 个和第 3 个。另一个对象，如图像，正常的文本滑动工作正常，但只有这个表显示了问题。而且我只使用核心 JS 进行滑动，但我的主文件有 jquery，但还有其他用途

Answer 1

我发现您的 html 标记有误。有一个多余的</td>这破坏了有效的 html。