如何增加 jQuery 变量？答案

【问题标题】：How to increment jQuery variable?如何增加 jQuery 变量？
【发布时间】：2015-09-21 19:07:54
【问题描述】：

我正在尝试使用 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在它设置的功能后持续存在？

【问题讨论】：

第三行要不要加分号？
您已经编辑了很多代码。请在完成后更新问题所在。如果您单步执行 javascript 并观察变量 x，它不会增加吗？它会卡在 1 还是 2？
你能否提供这段代码的上下文（也就是代码的其余部分）？
@DanielHoffmann-Mitscherling 它卡在 1。
什么是#pic元素？

标签： javascript jquery variables increment var

【解决方案1】：

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

【讨论】：

【解决方案2】：

如何让 x 在设置函数后保持不变？

尝试在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

【讨论】：

等一下，现在 x 总是 1。如何通过点击设置它？
"now x is always 1" 可以创建 stacksn-ps , jsfiddle jsfiddle.net 来演示吗？
我不确定如何创建一个 jsfiddle 来证明这一点。但是如果我设置x = 5，比如点击图片#5，然后点击#browse-right，x设置为2，而不是6。
@JoeMorano "不确定如何创建一个 jsfiddle 来证明这一点" 在左上角的 textarea 中包含 html，在左下角的 textarea 中包含 js，@987654334 @ 在右上角的文本区域；在“Framesworks & Extensions”处选择jQuery，点击“Run”
@JoeMorano 你真的应该阅读scope

【解决方案3】：

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

您可以检查几件事：

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

【讨论】：