Question

我正在尝试制作一个非常简单的图库浏览器，但是我的数组及其数据无法正常工作，因此页面不会响应数组键的变化。我想要的是当点击next-button或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的数组，这些工作正常并且没有问题。从技术上讲，每次点击上一个和下一个按钮时，图像及其信息都应该切换，但不要。我对所有变量发出警报，当按下按钮时它们都会改变，但页面上的图像/信息保持不变。我在这里做错了什么？

Answer 1

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

这需要在两个分页功能中。

您正在递增/删除currentImg变量，但之后您不会在此之后设置图像。

编辑：或者在它自己的功能中，然后从其他两个调用它。编辑2：他们都需要去那里。

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]);
}

数组键变量正在更改，但不是变量数据

1 个答案: