解決一個jQuery代碼來改變CSS onclick

這是我第一次完全從頭開始編寫一些jQuery代碼，所以除了我在某處出錯的事實之外，我也不確定這是否是最好的方法我正在嘗試做什麼。開始！解決一個jQuery代碼來改變CSS onclick

我正在使用jQuery Swipe.js來控制移動網站上的滑塊。滑塊包含3個div。我也有一些左/右箭頭按鈕，用戶可以點擊調用滑動功能。

根據當前視口中的內容，我想在調用滑動操作時隱藏/顯示一些div。我試圖用一個簡單的變量i來做到這一點，這個變量根據用戶正在查看的當前頁面被添加/減少。

的原始腳本調用swipe.js功能只是var slider = new Swipe(document.getElementById('slider'));

，我寫的腳本代碼是這樣的：//編輯：回顧輕掃文檔

var slider = new Swipe(document.getElementById('slider'), { 
     callback: function() { 

     var pageNumber = slider.getPos(); 
     if (pageNumber = 0) { 
      $(".leftArrow").css("display", "none"); 
      $("footer#about").css("display", "none");  
      $("footer#adFooter").css("display", "none"); 
     } 

     else if (pageNumber = 1) { 
      $(".leftArrow").css("display", "inline"); 
      $("footer#adFooter").css("display", "inline");   
      $("footer#about").css("display", "none"); 

     } 

     else if (pageNumber = 2) { 
      $("footer#adFooter").css("display", "none");   
      $("footer#about").css("display", "inline"); 
     }  
    } 
});

後更新HTML代碼是這樣的：

<a href='#' onclick='slider.prev(); return false;'><img class="leftArrow" src="img/arrow_right.png" alt="Left Nav Arrow"/></a> 
<a href='#' style="" onclick='slider.next(); return false;'><img class="rightArrow" src="img/arrow_right.png" alt="Right Nav Arrow"/></a>

我不能確切地看到我已經錯了這裏，但ē可視整個事情不起作用。思考？

來源

2012-01-12 Jascination

我想知道爲什麼你使用變量名'i'作爲'pageNumber'的佔位符。你能開導我嗎？ – Hogan 2012-01-12 11:42:55

我一直在通過codecademy JavaScript進入課程，這只是在那裏使用的變量。將嘗試一個不同的變量，並在下面使用您的建議並回報。 – Jascination 2012-01-12 12:20:30

謝謝，我要在codeacademy上添加評論 – Hogan 2012-01-12 12:35:33

你不說你有什麼問題，但有一個問題很明顯。 i可以是-1和3。將您的兩條if語句更改爲i>0和i<2，並且不要像現在這樣包含=。

來源

2012-01-12 11:46:03 Hogan

使用了您的建議，但仍然無法正常工作。在Chrome的控制檯中，我沒有看到任何錯誤，但點擊箭頭完全沒有任何問題。（而當代碼最初是'var slider = new Swipe（document.getElementById（'slider'））;''幻燈片函數工作正常，並且所有的div都在加載頁面時顯示，下面是一個實時版本破碎的網站：http://harrisonfjord.com/folio/和這是它的工作之前，我改變了代碼：http://harrisonfjord.com/folio/indexBackup.html – Jascination 2012-01-12 12:29:15

我看到的問題，但我沒有時間現在修復它 - 我建議查看Swipe的文檔並使用該插件搜索更多示例。現在，您的代碼實際上並沒有製作滑動元素。 – Hogan 2012-01-12 12:37:55

查看刷新文檔後，查看上面更新的代碼（在此處未實現）我看到你可以添加一個回調函數，再加上這裏有一個getPos（）函數，我認爲我很接近（至少，我希望...），現在幻燈片函數正常工作，儘管沒有我已經放入回調函數似乎在工作... U pdated住在http://harrisonfjord.com/folio/ – Jascination 2012-01-12 13:32:57

解決一個jQuery代碼來改變CSS onclick

回答

相關問題