javascript - 如何正确到达数组的开头或结尾？如何传递当前选定项目的引用？

Question

感谢您花时间提供帮助。CoffeeScript 版本为 1.3.3；jQuery 版本来自 Rails 3.2.8 jquery-rails gem 2.1.3。

我有一系列诗歌，它们各自的链接存储在 $poems_for_year_hrefs 中。我可以使用 $.each() 获取 $poems_for_year_hrefs 中元素的索引并将其存储在poemUrls 中。

页面的下一个链接在单击时用于将poemUrls 的索引增加到下一个元素并更新$next_link 的href 属性。如果索引超过了poemUrls 的长度，则将索引设置回0 以给出数组中的第一个元素。

页面的上一个链接在单击时用于通过将poems_for_year_hrefs 中的当前索引减1 来获取$poems_for_year_hrefs 中的下一个元素。然后它更新$prev_link 的href 属性。如果当前索引小于或等于 0，它会转到poemUrls 数组中的最后一个元素。

这是 CoffeeScript 代码：

$(document).ready ->
    $poem_years = $('#poems-for-year ul li a')
    $poem = $('#main-poem').hide()
    $poem_years.click -> 
      $poem.eq(0).fadeIn('slow', -> 
        $poem.slideDown('slow')
     )
     console.log "Clicked on a poem title with index of #{$poem_years.index(@)}"

    $poems_for_year_hrefs = $('#poems-for-year ul li a[href]')

    index = $poems_for_year_hrefs.index(@)
    poemUrls = []
    $($poems_for_year_hrefs).each((i)->
      poemUrls[i] = $(@).attr('href')
      poemUrls.join(",")
    )
    console.log "The poemUrls array contains: #{poemUrls}"

    $next_link = $('#previous-next li a').last()
    $next_link.click ->
      if index >= poemUrls.length
        index = 0
        $next_link.attr('href', poemUrls[index]).attr('href')
      else
        index += 1
        console.log "$next_link was clicked on!"
        $next_link.attr('href', poemUrls[index]).attr('href')
        console.log "$next_link href was set to #{$next_link.attr('href')}"

    $prev_link = $('#previous-next li a').first()
    $prev_link.click ->
      if index <= 0
        index = poemUrls.length
        $prev_link.attr('href', poemUrls[index]).attr('href')
      else
        index -= 1
        console.log "$prev_link was clicked on!"
        $prev_link.attr('href', poemUrls[index]).attr('href')
      console.log "$prev_link href was set to #{$prev_link.attr('href')}"

和 HTML：

    <!DOCTYPE html>
    <html>
    <head>
    <title>...</title>
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/poetry.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="XcXpd5Fg50gvWP8tVLB0/HOfBxoPaTOJ9q37zArrrFo=" name="csrf-token" />
    </head>
    <body>
    <div>
    <div id="content">
    <h1>poetry</h1>
    <section id="poem-selections">
    <article id="archives">
    <nav id="archive-year-nav">
    <ul>
    <li><a href="/poetry/2011">2011</a>
    <li><a href="/poetry/2012">2012</a>
    </ul>
    </nav>

    <div id="poems-for-year">
    <ul>
    <li><a href="/poetry/2012/1st%20poem%20title?id=16" data-remote="true">1st poem   title</a>
    </li>
    <li><a href="/poetry/2012/2nd%20poem%20title?id=17" data-remote="true">2nd poem  title</a>
    </li>
    <li><a href="/poetry/2012/3rd%20poem%20title?id=18" data-remote="true">3rd poem   title</a>
    </li>
    </ul>

   </div>
   </article>

   </section>

   <section id="main">

   <article>
   <div id="main-poem">
   <h3>2nd poem title</h3>
   <p>2nd poem verse</p>
   </div>
   <nav>
   <ul id="previous-next">
   <li><a href="/poetry/2012/previous_poem/2nd%20poem%20title?id=17" data-  remote="true">previous</a></li>
   <li><a href="/poetry/2012/next_poem/2nd%20poem%20title?id=17" data-remote="true">next</a>      </li>
   </ul>
   </nav>

   </article>

   </section>
   </div>
   </body>
   </html>

我正在使用 Ajax 对 main-poem div 进行更新。如果我点击年度诗歌 div 中的第 2 首诗 (id=17)，主诗 div 将更新，显示第 2 首诗 (id=17) 的内容。如果我单击下一个链接，则会返回在poemUrls 中位置0 处索引的第一首诗。然后我单击下一步，将返回poemUrls 位置1 中的诗歌，然后再次单击下一步，返回位置2 会按照应有的方式移动。一旦我到达数组的末尾，我单击下一个链接将索引计数循环回 0 以到达poemUrls 数组的开头，我需要单击下一步两次。第一次单击什么也不做。

遇到同样的问题，如果我选择第三首诗，然后单击上一个链接。索引从 0 开始，然后返回poemUrl 数组的第一个位置。单击上一个，通过数组将索引减一。到达第一个元素，然后我需要单击两次才能到达数组中的最后一个位置。

为什么我需要点击两次？它是一个失去上下文的变量吗？

*另外，如何将当前选定元素的引用传递给 $next_link.click，以便它知道当前选定的元素是什么，并且可以获得正确的下一个元素，而不是从 0 开始？换句话说，如果我点击年度诗歌中的第 2 首诗 (id=17)，如何获取 $next_link.click 以返回第 3 首诗 (id=18)，或者如果我单击上一个获取 $prev_link .点击返回第一首诗（id=16）？*

CoffeeScript 编译为 JavaScript：

$(document).ready(function() {
  var $next_link, $poem, $poem_years, $poems_for_year_hrefs, $prev_link, index, poemUrls;
  $poem_years = $('#poems-for-year ul li a');
  $poem = $('#main-poem').hide();
  $poem_years.click(function() {
    $poem.eq(0).fadeIn('slow', function() {
      return $poem.slideDown('slow');
    });
    return console.log("Clicked on a poem title with index of " + ($poem_years.index(this)));
  });
  $poems_for_year_hrefs = $('#poems-for-year ul li a[href]');
  index = $poems_for_year_hrefs.index(this);
  poemUrls = [];
  $($poems_for_year_hrefs).each(function(i) {
    poemUrls[i] = $(this).attr('href');
    return poemUrls.join(",");
  });
  console.log("The poemUrls array contains: " + poemUrls);
  $next_link = $('#previous-next li a').last();
  $next_link.click(function() {
    if (index >= poemUrls.length) {
      index = 0;
      return $next_link.attr('href', poemUrls[index]).attr('href');
    } else {
      index += 1;
      console.log("$next_link was clicked on!");
      $next_link.attr('href', poemUrls[index]).attr('href');
      return console.log("$next_link href was set to " + ($next_link.attr('href')));
    }
  });
  $prev_link = $('#previous-next li a').first();
  return $prev_link.click(function() {
    if (index <= 0) {
      index = poemUrls.length;
      $prev_link.attr('href', poemUrls[index]).attr('href');
    } else {
      index -= 1;
      console.log("$prev_link was clicked on!");
      $prev_link.attr('href', poemUrls[index]).attr('href');
    }
    return console.log("$prev_link href was set to " + ($prev_link.attr('href')));
  });
});

编辑

    $next_link = $('#previous-next li a').last()
    $next_link.click ->
      nextPoemUrl = poemUrls[ if index >= poemUrls.length - 1 then 0 else index + 1 ]
      console.log "When I call $next_link_click, nextPoemUrl is: #{nextPoemUrl}"
      $next_link.attr('href', nextPoemUrl).attr('href')
      console.log "When I call $next_link_click, next_link href is: #{$next_link.href}"

    $prev_link = $('#previous-next li a').first()
    $prev_link.click ->
      prevPoemUrl = poemUrls[ if index <= poemUrls.length - 1 then 0 else index - 1 ]
      console.log "When I call $prev_link.click, prevPoemUrl is #{prevPoemUrl}"
      $prev_link.attr('href', prevPoemUrl).attr('href')
      console.log "When I call $prev_link_click, prev_link href is #{$prev_link.href}"

测试结果： poemUrls 数组包含：/poetry/2011/1st%20poem%20title%202011?id=19,/poetry/2011/2nd%20poem%20title%202011?id=20,/poetry/2011/3rd% 20诗%20title%202011?id=21

单击索引为 2 的诗标题（数组中的最后一首诗包含 3 首诗）当我调用 $prev_link.click 时，prevPoemUrl 为 /poetry/2011/3rd%20poem%20title%202011?id=21（数组中的最后一首诗）当我调用 $prev_link_click 时，prev_link href 未定义

我再次点击最后一首诗：点击索引为 2 的诗标题（最后一首诗）

当我调用 $next_link_click 时，nextPoemUrl 是：/poetry/2011/1st%20poem%20title%202011?id=19

当我调用 $next_link_click 时，next_link href 是：未定义

似乎 prev 返回索引的最后一首诗， next 返回索引的第一首诗谢谢您的帮助！

score 1 · Accepted Answer

你有一个错误。错误在，

if index >= poemUrls.length
    index = 0
...
if index <= 0
    index = poemUrls.length

在您的示例中，poemUrls.length是3，并且由于 JavaScript 数组是从零开始的（它们从零开始计数），因此有效索引是0、1 和 2。第一个片段将让索引在设置为0之前达到3。第二个片段将在索引达到0时将索引设置为3。更正后的代码是，

if index >= poemUrls.length - 1
    index = 0
...
if index <= 0
    index = poemUrls.length - 1

编辑

解决第二个问题，如果你想访问当前诗歌的兄弟姐妹，你可以使用你的数组和索引结构。快速的 CoffeeScript 解决方案是，

prevPoemUrl = poemUrls[ if index <= 0 then poemUrls.length - 1 else index - 1 ]
nextPoemUrl = poemUrls[ if index >= poemUrls.length - 1 then 0 else index + 1 ]

score 0 · Accepted Answer

这是获取点击诗歌当前位置的来源，并相应地进行下一个和上一个链接。这是一个粗略的草案，但有效：

$(document).ready ->
    $poem_years = $('#poems-for-year ul li a')
    $poem = $('#main-poem').hide()
    $poem_years.click -> 
      $poem.eq(0).fadeIn('slow', -> 
        $poem.slideDown('slow')
      )
      console.log "Clicked on a poem title with index of #{$poem_years.index(@)}" # <-- where gets current index of clicked poem title!
      $poems_for_year_hrefs = $('#poems-for-year ul li a[href]')
      index = $poem_years.index(@) # <-- Assign the current reference to the index variable
      poemUrls = []
      $($poems_for_year_hrefs).each((i)->
        poemUrls[i] = $(@).attr('href')
        poemUrls.join(",")
      )

      console.log "The poemUrls array contains these: #{poemUrls}"

      $prev_link = $('#previous-next li a').first()
      $prev_link.click ->
       console.log "the prevPoemUrl is: #{poemUrls[index]}"
       if index <= 0
         index = poemUrls.length - 1
         $prev_link.attr('href', poemUrls[index]).attr('href')
         $('#main-poem').hide().fadeIn('slow')
         console.log "$prev_link href when <= poemUrls.length was set to #{$prev_link.attr('href')}"
         console.log "The poemUrls when <= poemUrls.length is: #{poemUrls[index]}"
       else
         index -= 1
         console.log "$prev_link was clicked on!"
         $prev_link.attr('href', poemUrls[index]).attr('href')
         $('#main-poem').hide().fadeIn('slow')
         console.log "$prev_link href was set to #{$prev_link.attr('href')}"   
         console.log "The poemUrls poemUrls.length is: #{poemUrls[index]}"

      $next_link = $('#previous-next li a').last()
      $next_link.click ->
        if index >= poemUrls.length - 1
          index = 0
          $next_link.attr('href', poemUrls[index]).attr('href')
          $('#main-poem').hide().fadeIn('slow')
          console.log "$next_link href when >= poemUrls.length was set to #{$next_link.attr('href')}"
          console.log "The poemUrl when >= poemUrls.length is: #{poemUrls[index]}"
        else
          index += 1
          console.log "$next_link was clicked on!"
          $next_link.attr('href', poemUrls[index]).attr('href')
          console.log "$next_link href was set to #{$next_link.attr('href')}"
          console.log "The poemUrls when < poemUrls.length is: #{poemUrls[index]}"
          $('#main-poem').hide().fadeIn('slow')

javascript - 如何正确到达数组的开头或结尾？如何传递当前选定项目的引用？

2 回答 2

Related

Reference