2

我目前正在使用 ajax 在单击锚链接时拉入内容的网站上工作。我希望使用一组预定义的页面链接创建一个自定义的下一个/上一个按钮。

当单击下一个按钮时，我正在尝试使用数组作为计数器在页面中移动。但我想使用当前的 href 属性作为起点，然后将在数组中移动正负一取决于单击哪个按钮。

这是我正在使用的当前代码笔http://codepen.io/veryrobert/pen/ocIhl

HTML：

<a id="value1" href="one.html">NEXT</a>
<a id="value2" href="">PREV</a>

查询：

$(function(){

  var pages = [ "one.html", "two.html", "three.html", "four.html" ];
  var prev = "#value2";
  var next = "#value1";

  // This works as a starting point
  counter = 0;
     
  // But I'd really like this to be the starting point
  // counter = $(next).attr("href");

   $(next).click(function(e){
   e.preventDefault();  
   counter = (counter + 1) % pages.length;
   
  }); 

  $(prev).click(function(e){
    e.preventDefault();  
    counter = (counter - 1) % pages.length;
    $(prev).attr( "href", counter ); 
   }); 


});

我不是一个真正伟大的 JavaScript，所以如果这是一种愚蠢的方法或者我完全错误的方式，请原谅我。

4

1 回答 1

0

你可以试试这个

function getCounter(element, array) {

    var href = element.getAttribute('href');

    for ( var i=0; i < array.length; i++) {

        if ( array[i] === href ) {
            return i;
        }

    }

    return -1;

}

你像这样使用它：

counter = getCounter( document.getElementById(next), pages );

注意：如果您打算使用 jQuery，我不确定当您调用$(next).attr('href'). element.getAttribute('href')会返回 'one.html' 但 element.href会返回 'host.com/one.html'

于 2014-03-12T21:53:44.817 回答