第一個孩子控制不工作，並與CSS邊界問題

我必須在JQuery中創建一個非常簡單的相冊，有4個圖片和2個按鈕（「上一個」和「下一個」）一旦我到達專輯（意思是我在第一張圖片上按「上一張」或在最後一張上按「下一張」）腳本應該繼續向我展示循環中的各種圖片。我編寫了「Next」按鈕的代碼沒有問題，但是對於「Previous」按鈕使用相同的代碼（反過來）就不起作用了：一旦我找到了我的div的第一個孩子，我就可以看到是一個空白的邊框。第一個孩子控制不工作，並與CSS邊界問題

<script> 
     $(document).ready(function() { 
      $("img").wrapAll("<div>"); 
      $("div").children().hide(); 
      var current = $("div :first-child"); 
      current.show(); 
      $("#nextbutton").click(function() { 
       if (current.is(":last-child")) { 
        current.hide(); 
        current = $("div :first-child"); 
        current.show(); 
       } 
       else { 
        var next = current.next(); 
        current.hide(); 
        current = next; 
        current.show(); 
       } 
      }); 
      $("#prevbutton").click(function() { 
       if (current.is(":first-child")) { 
        current.hide(); 
        current = $("div:last-child"); 
        current.show(); 
       } 
       else { 
        var prev = current.prev(); 
        current.hide(); 
        current = prev; 
        current.show(); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     div{border-color: yellow; 
      border-style: groove;} 
     </style>

即使是陌生人，而不是看到我的div邊框覆蓋只是單一的形象，我得到一個更大的（具體而言，圖像是8×8，邊界8X20），我不知道如何糾正它以及。

來源

2016-04-05 kn0bbulo

檢查檢查元素，如果它真的是第一個孩子。 –

當我設置變量「當前」作爲第一個孩子的腳本的開始，我實際上得到的第一個圖像。另外，當腳本進入我的代碼的if部分時，腳本「崩潰」，所以我確信在迭代過程中我已經到達最後一個或第一個孩子了@PraveenKumar – kn0bbulo

你可以添加你的HTML – Pugazh

代碼中存在小錯字。在你$("#prevbutton").click()，行：

current = $("div:last-child");

應該是：

current = $("div :last-child"); 
//    ^space

$(div:last-child)正在尋找的最後一個子div而$(div :last-child)將查找div的最後一個孩子。

JSFiddle

來源

2016-04-05 13:03:33 ImClarky

不能相信它是...非常感謝！ – kn0bbulo

第一個孩子控制不工作，並與CSS邊界問題

回答

相關問題