簡體   English   中英

我的滑塊僅顯示第1和第3個滑塊,但不顯示表格的第2和第4個滑塊

[英]My slider only shows 1st and 3rd slider but not the 2nd and 4th slider for table

我制作了一個簡單的滑塊,可以正常使用普通表,但是當我嘗試將該滑塊用於我的自定義引導表時,只有第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 ,但還有其他用途

我看到你有錯誤的HTML標記。 有一個多余的</td>打破了有效的HTML。

我已經明白了。 這是一個div標簽問題。 Div沒有正確關閉。 現在它工作正常

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM