Cyclic and Static Number

Question

I have a loop to run through my buttons to give it a hang state, but I can’t figure out how to fix the “i” inside the functions when it loops. Ok, this is a bad way to explain what I'm trying to achieve, maybe the code will be clearer.

for ( i = 1; i < 4; i++ ) {
  $( '#buttons #'+i ).hover( function() {
	$( this ).text( i );
  }, function() {
	$( this ).text( 'Button' );
  });
};

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

<div id="buttons">
  <h1 id="1">Button</h1>
  <h1 id="2">Button</h1>
  <h1 id="3">Button</h1>
</div>

Run codeHide result

The estimated guidance state of each button should be displayed respectively 1, 2, 3.

Answer 1

, , . , i hover() . - :

for ( i = 1; i < 4; i++ ) {
    setupHover( i );
}

function setupHover( i ) {
  $( '#buttons #' + i ).hover( function() {
	$( this ).text( i );
  }, function() {
	$( this ).text( 'Button' );
  });
};

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

<div id="buttons">
  <h1 id="1">Button</h1>
  <h1 id="2">Button</h1>
  <h1 id="3">Button</h1>
</div>

Hide result

, ? , hover() . , .

, for , , hover() . i 4 .

, i , , . , i setupHover() i for. , , .

" JavaScript".

, , , . , , .

, , , - , , , , , inline . , , , .

Answer 2

, :

for ( i = 1; i < 4; i++ ) {
      $( '#scene-3 .selection img:nth-child('+i+')' ).hover(
       (function (value){
          return function (){
            $( this ).attr( 'src', 'img/s3-b'+value+'b.png' );
          }
       })(i)
       ,(function (value){
           return function (){
             $( this ).attr( 'src', 'img/s3-b'+value+'.png' );
           }
         })(i));
    };

Hide result

. this

Answer 3

4, i 4 , hover 4- . , i 5, s3-b5b.png.

,

nth-child jquery

$('#scene-3 .selection img').hover(function () {
    $( this ).attr( 'src', 'img/s3-b'+parseInt($(this).index() + 1)+'b.png' );
}, function () {
    $( this ).attr( 'src', 'img/s3-b'+parseInt($(this).index() + 1)+'.png' );
});

Answer 4

, , , .

"i" 4 , 4. $( this ).text( this.id );,

for ( i = 1; i < 4; i++ ) {
  $( '#buttons #'+i ).hover( function() {
	$( this ).text( this.id );
  }, function() {
	$( this ).text( 'Button' );
  });
};

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

<div id="buttons">
  <h1 id="1">Button</h1>
  <h1 id="2">Button</h1>
  <h1 id="3">Button</h1>
</div>

Hide result

Answer 5

:

$(function() {
  var buttonsSelectorString = '#buttons > h1';
  var defaultButtonText = 'Button';

  var iterator = function(index, element) {
    var mouseEnterAction = function(event) {
      $(event.target).text(index + 1);
    };

    var mouseLeaveAction = function(event) {
      $(event.target).text(defaultButtonText);
    };

    $(element)
      .on('mouseenter', mouseEnterAction)
      .on('mouseleave', mouseLeaveAction);
  };

  $(buttonsSelectorString).each(iterator);
});

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

<div id="buttons">
  <h1>Button</h1>
  <h1>Button</h1>
  <h1>Button</h1>
</div>

Hide result

: http://codepen.io/anon/pen/WxKAKm