箭頭鍵更改圖片Javascript

Question

當您單擊縮略圖時，它會顯示更大的圖片，然後您可以使用箭頭鍵（左和右）更改上一張/下一張圖片。

我不知道如何編碼右箭頭鍵以避免NaN值。

當您按住右箭頭鍵時，它將輸出NaN值。我怎樣才能避免這種情況？我怎麼能期望值1,2,3,4 ....當我繼續按下右箭頭鍵？這裏是我的HTML代碼

<div class="col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="5" data-toggle="modal" data-title="Breast Revision Implant Exchange" data-caption="Before and After: Previous breast implants removed and exchanged with larger smooth round silcone implants followed by liposuction of the armpit/axillary and side of chest area" data-image="http://www.afbplasticsurgery.com/before-after-images/breast-revision-lateral-view-b-a.jpg" data-target="#image-gallery"> 
    <div class="ba-thumb"> 
     <table> 
     <tbody> 
      <tr> 
      <td><img class="ba-thumbnail" src="http://www.afbplasticsurgery.com/before-after-images/thumb/breast-revision-b-lateral-view-150.jpg"></td> 
      <td><img class="ba-thumbnail" src="http://www.afbplasticsurgery.com/before-after-images/thumb/breast-revision-a-lateral-view-150.jpg"></td> 
      </tr> 
      <tr> 
      <td class="ba-note" colspan="2">Breast Revision Implant Exchange</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </a></div> 
    <div class="clr"></div> 

    <!-- end pic element --> 

    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title" id="image-gallery-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <center> 
      <img id="image-gallery-image" class="img-responsive" src=""> 
      </center> 
      <div class="modal-body-button"> 
      <div class="col-md-6"> 
       <span id="show-previous-image" class="previous-page"></span> 
      </div> 
      <div class="col-md-6"> 
       <span class="pull-right"> 
       <span id="show-next-image" class="next-page"></span> 
       </span> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="text-justify" id="image-gallery-caption">This text will be overwritten by jQuery </div> 
     </div> 
     </div> 
    </div> 
    </div> 

這裏是我的Javascript

$(document).ready(function() { 

loadGallery(true, 'a.thumbnail'); 

function disableButtons(counter_max, counter_current) { 
    $('#show-previous-image, #show-next-image').show(); 
    if (counter_max == counter_current) { 
     $('#show-next-image').hide(); 
    } else if (counter_current == 1) { 
     $('#show-previous-image').hide(); 
    } 
} 
function loadGallery(setIDs, setClickAttr) { 
    var current_image, selector, counter = 0; 

    $(document).keydown(function(e) { 
     var code = e.keyCode || e.which; 

     switch (code) { 
      case 37: 
       if (current_image == 1) { 
        current_image = 1; 
       } else { 
        current_image--; 
       } 

       console.log(current_image); 

       break; 

      case 39: 

       current_image++; 
       console.log(current_image); 
       break; 

      default: 
       return; 

     } 

     selector = $('[data-image-id="' + current_image + '"]'); 
     updateGallery(selector); 

     e.preventDefault(); 

    }); 

    $('#show-next-image, #show-previous-image').click(function() { 
     if ($(this).attr('id') == 'show-previous-image') { 
      current_image--; 
     } else { 
      current_image++; 
     } 

     selector = $('[data-image-id="' + current_image + '"]'); 
     updateGallery(selector); 
     console.log(selector); 
    }); 

    function updateGallery(selector) { 
     var $sel = selector; 
     current_image = $sel.data('image-id'); 
     $('#image-gallery-caption').text($sel.data('caption')); 
     $('#image-gallery-title').text($sel.data('title')); 
     $('#image-gallery-image').attr('src', $sel.data('image')); 
     disableButtons(counter, $sel.data('image-id')); 
    } 
    if (setIDs == true) { 
     $('[data-image-id]').each(function() { 
      counter++; 
      $(this).attr('data-image-id', counter); 
     }); 
    } 
    $(setClickAttr).on('click', function() { 
     updateGallery($(this)); 
    }); 
} 

}）;

或採取http://jsfiddle.net/8o0L4e2f/

Answer 1

好的，所以我離開了我以前的答案，因爲我確定的所有問題都是有效的。但是代碼太破碎，無法繼續解決問題。我很無聊，決定將解決所有問題......

這裏是更新fiddle，和固定碼：

$(document).ready(function() { 
    // initial and max value of 0 
    var current = 0, max = 0; 

    // load up the gallery 
    loadGallery(true, 'a.thumbnail'); 

    function navigate(forward) { 
     if (forward && current <= max) { 
      current++; 
     } else if (current >= 1) { 
      current--; 
     } 

     console.log('showing ' + current + 'th image'); 
     updateDetails(); 
     disableButtons(); 
    } 

    function updateDetails() { 
     console.log('updating details for ' + current + 'th image'); 
     var $sel = $('[data-image-id="' + current + '"]'); 
     $('#image-gallery-caption').text($sel.data('caption')); 
     $('#image-gallery-title').text($sel.data('title')); 
     $('#image-gallery-image').attr('src', $sel.data('image')); 
     $('#image-gallery-link a').text($sel.data('title')); 
     $('#image-gallery-link a').attr('src', $sel.data('href')); 
    } 

    function disableButtons() { 
     console.log('in disable, (current=' + current + ', max=' + max + ')'); 
     if (current == max) { 
      console.log('disabling next'); 
      $('#show-next-image').hide(); 
      $('#show-previous-image').show(); 
     } else if (current == 0) { 
      console.log('disabling previous'); 
      $('#show-next-image').show(); 
      $('#show-previous-image').hide(); 
     } 
    } 

    // loads the gallery and sets observers 
    function loadGallery(setIDs, setClickAttr) { 
     if (setIDs) { 
      $('[data-image-id]').each(function(i, e) { 
       console.log('setting id for image: ' + i); 
       $(this).attr('data-image-id', (max = i)); 
      }); 
     } 

     $(document).keydown(function (e) { 
      var code = e.keyCode || e.which; 
      e.preventDefault(); 

      switch (code) { 
       // left key 
       case 37: navigate(false); break; 
       // right key 
       case 39: navigate(true); break; 
       default:; 
      } 
     }); 

     $('#show-next-image, #show-previous-image').click(function() { 
      navigate($(this).attr('id') === 'show-next-image'); 
     }); 

     $(setClickAttr).on('click', function() { 
      current = $(this).attr('data-image-id'); 
      console.log('clicked the ' + current + 'th image...'); 
      updateDetails(); 
      disableButtons(); 
     }); 
    } 
}); 

_{PS：如果你只是去通過與調試器，你將有也能夠修復它。}

Answer 2

你current_image變量一看就是從來沒有初始化。你有這樣的：

var current_image 

這是一樣的：

var current_image = undefined; 

所以，當你的代碼第一次運行時，current_image不等於一體，因而你的代碼試圖減小數字：

if (current_image == 1) { 
    current_image = 1; 
} else { 
    current_image--; 
} 

遞減undefined會給你NaN：

所以要解決這個問題，您需要爲您的current_image變量設置一個起始值。

例如：var current_image = 0;

UPDATE

好了，所以它再尋找後，您在多個地方指定您current_image變量。

按權的current_image值被遞增，然後updateGallery被調用，在這個函數以下行運行後;這是得到undefined值的位置：

current_image = $sel.data('image-id'); 

這意味着，圖像標識無效。