0

お時間を割いていただきありがとうございます。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 の次の要素を取得するために使用され、poemUrl の現在のインデックスを 1 減らします。次に、$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 配列の先頭に到達します。[次へ] を 2 回クリックする必要があります。最初のクリックは何もしません。

3 番目の詩を選択して前のリンクをクリックすると、同じ問題が発生します。インデックスは 0 から始まり、poemUrl 配列の最初の位置を返します。前をクリックし、配列を調べてインデックスを 1 つ減らします。最初の要素に到達したら、前の要素を 2 回クリックして配列の最後の位置に到達する必要があります。

2 回クリックする必要があるのはなぜですか? コンテキストを失う変数ですか？

*また、現在選択されている要素の参照を $next_link.click に渡して、現在選択されている要素が何であるかを認識し、0 から開始するのではなく適切な次の要素を取得するにはどうすればよいですか? 言い換えると、poems-for-year の 2 番目の詩 (id=17) をクリックすると、$next_link.click を取得して 3 番目の詩 (id=18) を返すにはどうすればよいか、または前をクリックすると $prev_link を取得できますか? .クリックして最初の詩 (id=16) を返しますか?*

JavaScript にコンパイルされた CoffeeScript:

$(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詩%20タイトル%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 は索引付けされた最初の詩を返すようです。

4

2 に答える 2

1

off-by-one エラーがあります。エラーは次の場所にあります。

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

あなたの例では、poemUrls.lengthは3であり、JavaScript 配列はゼロベースであるため (ゼロからカウントを開始します)、有効なインデックスは0、1、および 2です。最初のスニペットでは、インデックスを0に設定する前に3にします。2 番目のスニペットは、インデックスが0に達したときにインデックスを3に設定します。修正したコードは、

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

編集

2 番目の質問に対処すると、現在の詩の兄弟にアクセスしたい場合は、配列とインデックス構造を使用できます。簡単な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 ]
于 2012-10-23T14:36:07.837 に答える
0

クリックした詩の現在の位置を取得し、それに応じて次のリンクと前のリンクを進めるためのソースは次のとおりです。これは大まかなドラフトですが、機能します。

$(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')
于 2012-10-23T19:56:41.647 に答える