箭头键更改图片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'); 

这意味着，图像标识无效。