javascript - 使用 anchor .attr href 作为计数器中数组的起点

Question

我目前正在开发一个站点，该站点使用 ajax 在单击 anchor 链接时提取内容。我希望使用一组预定义的页面链接创建一个自定义的下一个/上一个按钮。

我正在尝试使用一个数组作为计数器，以便在单击下一个按钮时在页面中移动。但我想使用当前的 href 属性作为起点，然后通过加号或减号在数组中移动，具体取决于单击的是哪个按钮。

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

HTML:

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

J查询:

$(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，所以如果这是一个愚蠢的方法或者我正在以完全错误的方式进行这件事，请原谅我。

Answer 1

你可以试试这个

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'