How to increment jQuery variable?

问题

I'm trying to browse through a picture gallery with jquery, so I have a button which is supposed to increment a variable by 1 and then use that to load the next picture.

Using the top answer on this SO question, I thought this would be the solution:

<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" />');
});

But it just reloads the same picture, which means var x doesn't change. Anyone know the proper syntax?

UPDATE: Okay, I think I've figured out the problem. x is set when a picture is clicked on, and apparently it isn't persisting after the function is complete. I didn't include that part in the original code because I thought it would make the whole thing more complicated to read.....lesson learned. How can I get x to persist after the function it is set in?

回答1:

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

Try defining x outside of and before click handler

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

回答2:

Your code looks ok. and here's a working version https://jsfiddle.net/a50nz178/1/

A couple of things you could check:

check that the image is actually there /1.JPGas well
check that images are not all named as jpg all lower case?

回答3:

If I had to guess, looking at your previous _{You've updated. Turns out I was right. Your x was out of scope.} correct code, I'd bet your problem is scope. Scope Tutorial

I'm willing to bet, somewhere else in your code your using something like for(x in ; ... Which is reassigning x. If that's not the case, I'd still bet on either scope, or the image is src isn't correct. You should use your developer console to check if a bad image source is being pulled. Your using / at the begining of your img src which will go back to base path. If you images are in an images folder you need to include the proper directory path.

You could easily shorten the scope of this by attaching your increment variable to your element object like so:

$("#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>

来源：https://stackoverflow.com/questions/31215307/how-to-increment-jquery-variable

标签

javascript

jquery

variables

increment

var