如何增加 jQuery 变量？

Question

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

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

<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

你的代码看起来没问题。这是一个工作版本 https://jsfiddle.net/a50nz178/1/

您可以检查几件事：

检查图像是否确实存在 /1.JPG
检查图像是否全部命名为 jpg 全部小写？

Answer 2

如果我不得不猜测的话，看看你的以前的 _{你已经更新了。事实证明我是对的。您的 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>

Answer 3

How can I get x to persist after the function it is set in?

尝试在 click 处理程序

之外和之前定义 x

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

如何增加 jQuery 变量？

How to increment jQuery variable?

javascript

variables

jquery

var

increment