Question

大家好我想尝试循环2个数组，一个数组处理按钮ID，另一个处理文本。但是它似乎无法遍历文本数组。当我尝试window.alert值时，它返回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

由于scope上下文中的.click()不同，您需要先从textArray获取文字，如下所示：

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

我就是这样做的。

 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

或者像这样...

$('.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>

或者像这样...

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

或者像这样...

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

您可以使用jQuery的index()。（如下所示）

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

这可能是一种比这更好的方法，但这就是我解决你问题的方法。

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();

基本上，您不能在循环中拥有事件侦听器。它没有用。

JSFiddle

使用for循环访问Jquery中的数组

4 个答案: