Question

我试图用jquery浏览图片库，所以我有一个按钮，它应该将变量递增1然后用它来加载下一张图片。

使用this问题的最佳答案，我认为这将是解决方案：

<div id="pic"></div>
<div id="browse-right">NEXT</div>

<%= image_tag("/1.JPG", id:"1") %>
<%= image_tag("/2.JPG", id:"2") %>
<%= image_tag("/3.JPG", id:"3") %>

$("#1").click(function() {
  var x = 1;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
$("#2").click(function() {
  var x = 2;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
$("#3").click(function() {
  var x = 3;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});
//...
$("#browse-right").click(function() {
  x = x + 1;
  $("#pic").html('<img src="/' + x + '.JPG" />');
});

但它只是重新加载相同的图片，这意味着var x不会改变。有人知道正确的语法吗？

更新：好的，我想我已经找到了问题所在。单击图片时会设置x，显然在功能完成后它不会持续存在。我没有在原始代码中包含该部分，因为我认为它会使整个事情变得更加复杂......所吸取的教训。如何在设置函数后让x保持不变？

Answer 1

如何在设置函数后让x继续存在？

尝试在x处理程序

之外和之前定义click

var x = 1;
$("body").on("click", function() {
  x = x + 1;
  $(this).html(x)
})

body {
  width: 300px;
  height: 300px;
  border: 1px solid purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
click

Answer 2

您的代码看起来不错。这是一个有用的版本https://jsfiddle.net/a50nz178/1/

你可以检查几件事：

检查图片是否实际上还有/1.JPG
检查图片是否全部命名为jpg全部小写？

Answer 3

如果我不得不猜测，请查看之前的 _{您已更新。事实证明我是对的。您的x超出了范围。}正确的代码，我敢打赌您的问题是范围。 _{Scope Tutorial}

我愿意在代码的其他地方下注，使用像for(x in ; ...那样重新分配x的内容。如果情况并非如此，我仍然会赌注任一范围，或者图像src不正确。您应该使用开发人员控制台检查是否正在提取错误的图像源。您在/开始时使用img src将返回base path。如果图像位于图像文件夹中，则需要包含正确的目录路径。

您可以通过将增量变量附加到元素对象来轻松缩短范围：

$("#browse-right").click(function(e) {
    //  the following is a simple inline `if` statement
    //  what it says is (this is your element)
    //  if this.i does not exist, create it equal to one, 
    //  else count it up once
    !this['i'] ? this.i=1: this.i++;
    $("#pic").html('<img src="/' + this.i + '.JPG" />');
    //  the following simply shows what `i` currently is
    $('h3').text(this.i);
});

p { cursor: pointer; background: #aabb00; padding: 1em .5em; text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="browse-right">Browse Right</p>
<h3></h3>
<div id="pic">
  IMG HERE
</div>

如何增加jQuery变量？

3 个答案: