0

我正在尝试制作一个非常简单的图片库查看器，但我的数组及其数据无法正常工作，因此页面无法响应数组键的更改。我想要的是当单击next-buttonor时previous-button，键中的变量会随着页面上显示的信息而变化。这是我的代码

HTML

<div id="gallery">
  <div id="gallery-control-bar">
    <div id="gallery-buttons" class="control-bar-item">
      <div id="previous-button" class="gallery-button">&larr;</div>
      <div id="next-button" class="gallery-button">&rarr;</div>
    </div><!-- "#gallery-buttons" -->
    <div id="image-index" class="control-bar-item">
      <span id="current-post">1</span> of <span id="post-total">29</span>
    </div><!-- "#image-index" -->
    <div id="gallery-type" class="control-bar-item">
      <img id="gallery-switch" alt="Gallery Icon" src="images/gallery-icon.png">
    </div>
  </div><!-- "#gallery-control-bar" -->

  <div id="gallery-image"></div>
</div><!-- "#gallery" -->

JS（这是我认为问题所在）

var currentImg = 0;
var totalImg = js_p_id.length - 1;

var userCurrent = currentImg + 1;
var userTotal = js_p_id.length;

$("#next-button").click(function() {
    if (currentImg == totalImg) {
        currentImg = 0;
    }
    else {
        currentImg++;
    }
    return;
});

$("#previous-button").click(function() {
    if (currentImg == 0) {
        currentImg = totalImg;
    }
    else {
        currentImg--;
    }
    return;
});

$("#gallery-image").html("<img src='" + js_p_src[currentImg] + "'>");
$("#gallery-title").html(js_p_title[currentImg]);
$("#gallery-medium").html(js_p_medium[currentImg]);
$("#gallery-size").html(js_p_size[currentImg]);
$("#gallery-date").html(js_p_date[currentImg]);

$("#current-post").html(userCurrent);
$("#post-total").html(userTotal);

带有前缀的变量js是在另一个脚本中使用 JSON 从 PHP 转换为 JS 的数组，它们工作正常且没有问题。从技术上讲，每次我单击上一个和下一个按钮时，图像及其信息应该会切换，但不会。我对所有变量发出警报，当我按下按钮时它们都会发生变化，但页面上的图像/信息保持不变。我在这里做错了什么？

4

1 回答 1

1 
$("#gallery-image").html("<img src='" + js_p_src[currentImg] + "'>");

这需要在两个分页函数内部。

您正在递增/递减 currentImg 变量，但不是每次都设置图像。

编辑：或者在它自己的函数中，然后从其他两个函数中调用它。EDIT2：他们都需要进去。

function changeImg(){
    $("#gallery-image").html("<img src='" + js_p_src[currentImg] + "'>");
    $("#gallery-title").html(js_p_title[currentImg]);
    $("#gallery-medium").html(js_p_medium[currentImg]);
    $("#gallery-size").html(js_p_size[currentImg]);
    $("#gallery-date").html(js_p_date[currentImg]);
}
于 2013-08-27T01:59:04.510 回答