使用for循环访问Jquery内部的数组

Question

Hi guys I am trying to loop through 2 arrays , one array handles button Ids , the other handles the text. However it does not seem to be able to iterate through the text array. When I try to window.alert the value , it returns undefined.

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
    $(buttonIdArray[i]).click(function() {
      window.alert(textArray[i])
    })
  }
}
<button id ='one'>one</button>
<button id ='two'>two</button>

Answer 1

Because of the different scope in the .click() context you need to get your text from textArray before, like this:

 var buttonIdArray = ['#one', '#two'] var textArray = ['this is button one', 'this is button two'] function buttonDetails() { for (var i = 0; i < buttonIdArray.length; i++) { const text = textArray[i] $(buttonIdArray[i]).click(function() { window.alert(text) }) } } buttonDetails() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='one'>one</button> <button id='two'>two</button> 

Answer 2

This is how I would do it.

 var textArray=["this is button 1","this is button 2"];

 $('.myButtons').click(function(){
    var index = $(this).index();
    alert(textArray[index]);
 });


<button class='myButtons' id="one">
Button 1
</button>
<button class='myButtons' id="two">
Button2
</button>

JS fiddle here

Or like this...

$('.myButtons').click(function(){
  alert($(this).data('text'));
});

<button class='myButtons' id="one" data-text="this is my text">
Button 1
</button>
<button class='myButtons' id="two"  data-text="this is my text 2">
Button2
</button>

Or like this...

var buttonArray =[
  {id:'#one',text:"this is button1"},
  {id:'#two',text:"this is button2"}
];



for (var i = 0; i < buttonArray.length; i++) {
  var index = i;
  $(buttonArray[index].id).click(function() {
    alert(buttonArray[index].text);
  });
}

Js Fiddle 2

Or Like this...

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
   var text = textArray[i]
   $(buttonIdArray[i]).click(function() {
     window.alert(text)
   })
  }
}

buttonDetails()

Answer 3

You can use index() of jQuery.(like below)

 var buttonIdArray = ['#one','#two']; var textArray=['this is button one','this is button two']; for (var i =0; i<buttonIdArray.length;i++) { $(buttonIdArray[i]).click(function(){ console.log(textArray[$(this).index()-1]); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id ='one'>1</button> <button id ='two'>2</button> 

Answer 4

There is probably a better way to do it than this, but this is how I solved your issue.

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
    for (var i = 0; i < buttonIdArray.length; i++) {
        $(buttonIdArray[i]).attr('textArrayIndex', i)
    }
}
$('button').click( function() {
    window.alert(textArray[$(this).attr('textArrayIndex')]);
})
buttonDetails();

Basically, you can't have an event listener within a loop. It doesn't work.

JSFiddle