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

您的current_image变量永远不会被初始化。你有这个：

var current_image

与以下内容相同：

var current_image = undefined;

因此，当您的代码第一次运行时，current_image不等于1，因此您的代码会尝试减少它：

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

减少undefined会给你NaN：

因此，要解决此问题，您需要为current_image变量设置一个起始值。

ex：var current_image = 0;

<强>更新

好的，所以再次查看后，您可以在多个位置分配current_image变量。

按右后，current_image值增加，然后updateGallery被调用，在此函数中运行以下行;这是获得undefined值的地方：

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

表示图片ID无效。

Answer 2

好的，所以我要离开我之前的回答，因为我在那里发现的所有问题都是有效的。但是代码太破碎了，无法继续按问题解决问题。我很无聊，决定解决所有问题......

以下是更新的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：如果您刚刚使用调试器，那么您也可以修复它。

箭头键改变图片Javascript

2 个答案: