如何使用 Jquery onclick 获取数组的下一个元素

Question

大家好，我正在尝试从 html 数组中更改对象的 html。但我在正确迭代时遇到问题。我设法让它工作一次 编辑 在对我的问题的明确性提出了一些抱怨之后，我将重新措辞。我有一个名为 .trpanel 的 div 面板和一个名为 #trigger2 的按钮（它是下一个按钮）。然后我有一系列包含翻译文本的 div。当我按下按钮（称为下一步）时，我希望在 trpanel 上逐个循环浏览翻译。

var ltranslation = [];
    ltranslation[0] = $("#translation-en-1").html();
    ltranslation[1] = $("#translation-ur-en").html();
    ltranslation[2] = $("#translation-fr-en").html();
    ltranslation[3] = $("#translation-it-en").html();
    ltranslation[4] = $("#translation-sp-en").html();
    ltranslation[5] = $("#translation-po-en").html();
    ltranslation[6] = $("#translation-fr-en").html();
    ltranslation[7] = $("#translation-de-en").html();

    var l= ltranslation;



   $("#trigger2").off('click').on('click',function(){ 
    for (var i = 0; i <= ltranslation.length; i++){ 
if (i==7){i=0;}
     $(".trpanel").html.ltranslation[i]; or ???//replace().ltranslation[]+i??? the code throws errors  
    } 
    });

我对 Javascript 还是很陌生，我对对象、数组和循环的类型有点困惑。我设法添加了 html，但没有替换它们……所以它们一个接一个地出现。我试图更改代码，但从那以后一直没有用。任何帮助将不胜感激。

Answer 1

很多猜测，但似乎您正在尝试这样做：

var trans = $('[id^="translation-"]'),
    idx   = 0;

$("#trigger2").on('click',function(){
    $(".trpanel").html( trans.eq(idx).html() );
    idx = idx > 6 ? 0 : idx+1;
});

FIDDLE

Answer 2

我认为您正在尝试这样做：

if (i == 7) {
    i = 0; // I don't really know why you are doing this, but it will reset the loop
}
 $(".trpanel").html(ltranslation[i]); //I'm passing ltranslation[i] to the html method. Instead of .html.ltranslation[i].
} 

另外，没有看到任何 html，我不确定，但我认为您可能想要迭代 .trpanel ？

类似：

 $(".trpanel").eq(i).html(ltranslation[i]);

另一件事（我认为您可以使您的代码更清晰）。您可以在函数中抽象数组填充，如下所示：

var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];

$.each(languages, function(index) {
    ltranslation[index] = $("#translation-" + this).html();
});
// Then you can use ltranslation

Answer 3

如果你想翻阅几个翻译，我会这样实现：

var translations=["hej","hello", "hallo","hoy"];

var showTranslation=function(){
    var current=0;
    var len=translations.length;
    return function(){
        var direction=1;
        if (current>=len) current=0;
        $("#text").text(translations[current]);
        current+=direction;
    }
}();

$("#butt").on("click", showTranslation);

小提琴：http://jsfiddle.net/Xr9fz/

进一步：你应该给你的翻译一个类，这样你就可以用一行轻松地抓住所有的翻译：

$(".translation).each(function(index,value){ ltranslation.push(value); })

Answer 4

从问题：我设法添加了 html，但没有替换它们 -

我认为您想将所有这些项目添加到 $(".trpanel")。首先，不要取每个元素的HTML，clone元素本身：

//method ripped from Nico's answer.
var ltranslation = [];
var languages = ["en-1", "ur-en", "fr-en", "it-en", "sp-en", "po-en", "fr-en", "de-en"];

$.each(languages, function(index) {
    ltranslation[index] = $("#translation-" + this).clone();
});

然后您可以将所有内容附加到容器中，因此添加 html 但不替换它们。 append 接受一个数组而不替换之前的 html。

$("#trigger2").off('click').on('click',function() {
    $(".trpanel").append(ltranslation);
}); 

Answer 5

我不知道您到底想做什么，但我已将 cmets 放入您的代码中，以帮助您更好地了解您的代码在做什么。你的代码的最终效果是这样的（我怀疑你想要的）：

 $("#trigger2").off('click').on('click',function(){ 
     $(".trpanel").html(ltranslation[7]); 
});

这是你的代码，有一些 cmets 和小改动

   var ltranslation = [];
    ltranslation[0] = $("#translation-en-1").html();
    ltranslation[1] = $("#translation-ur-en").html();
    ltranslation[2] = $("#translation-fr-en").html();
    ltranslation[3] = $("#translation-it-en").html();
    ltranslation[4] = $("#translation-sp-en").html();
    ltranslation[5] = $("#translation-po-en").html();
    ltranslation[6] = $("#translation-fr-en").html();
    ltranslation[7] = $("#translation-de-en").html();

var l= ltranslation;



   $("#trigger2").off('click').on('click',function(){ 
    for (var i = 0; i < ltranslation.length; i++){ 
     //if (i==7){i=0;}  <-- This will cause an infinite loop won't it?  are you trying to reset i? i will reset next time loop is called,
          $(".trpanel").html(ltranslation[i]);  //<-- this will overwrite elements with class .trpanel ltranslation.length times... 
         ///you'll see only the value of translation[7] in the end
     } 
    });

编辑

要根据你的 cmets 做你想做的事，试试这个：

 var ltranslation = [];
        ltranslation[0] = $("#translation-en-1").html();
        ltranslation[1] = $("#translation-ur-en").html();
        ltranslation[2] = $("#translation-fr-en").html();
        ltranslation[3] = $("#translation-it-en").html();
        ltranslation[4] = $("#translation-sp-en").html();
        ltranslation[5] = $("#translation-po-en").html();
        ltranslation[6] = $("#translation-fr-en").html();
        ltranslation[7] = $("#translation-de-en").html();
 var counter = 0;//a global counter variable
 $("#trigger2").click(function(){  //eeverytime button is clicked do this
    $(".trpanel").html(ltranslation[counter]); //set the html to an element of array
    counter++;  //increment counter
    if(counter==ltranslation.length) //reset the counter if its bigger than array len
       counter=0;

  });