Question

我制作了一个简单的滑块，适用于普通表，但是当我尝试将该滑块用于我的自定义引导表时，仅显示第1个，第3个滑块，但不显示第2个和第4个滑块。

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个类似的表格，但在将其添加到我的班级后，只显示第1个和第3个。另一个像图像，普通文本滑动的对象工作正常，但只有这个表显示问题。我只使用核心 JS 进行滑动，但我的主文件有 jquery ，但还有其他用途

Answer 1

我看到你有错误的HTML标记。有一个多余的</td>打破了有效的HTML。

Answer 2

我已经弄清楚了。这是一个div标签问题。 Div没有正确关闭。现在它工作正常

我的滑块仅显示第1和第3个滑块，但不显示表格的第2和第4个滑块

2 个答案: