![](/img/trans.png)
[英]jQuery image slider first loading amalgimation of 3rd and 4th images instead of 1st
[英]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)">❮</button>
<button class="w3-button w3-black w3-display-right"
onclick="plusDivs(1)">❯</button>
</div>
我只給了一個輸入文件。 將添加更多3個類似的表格,但在將其添加到我的班級后,只顯示第1個和第3個。 另一個像圖像,普通文本滑動的對象工作正常,但只有這個表顯示問題。 我只使用核心JS進行滑動,但我的主文件有jquery ,但還有其他用途
我看到你有錯誤的HTML標記。 有一個多余的</td>
打破了有效的HTML。
我已經明白了。 這是一個div標簽問題。 Div沒有正確關閉。 現在它工作正常
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.