javascript - 如何使用 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