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

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

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

var ltransation=[]；
ltransation[0]=$（“#translation-en-1”）.html（）；
ltransation[1]=$（“#translation ur en”）.html（）；
ltransation[2]=$（“#translation fr en”）.html（）；
ltransation[3]=$（“#translation it en”）.html（）；
ltransation[4]=$（“#translation sp en”）.html（）；
ltransation[5]=$（“#translation po en”）.html（）；
ltransation[6]=$（“#translation fr en”）.html（）；
ltransation[7]=$（“#translation de en”）.html（）；
var l=翻译；
$（“#trigger2”）.off（'click'）.on（'click'，function（）{
对于（var i=0；i我认为您正在尝试这样做：

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

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

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

我不知道你到底想做什么，但我已经在你的代码中添加了注释，以帮助你更好地理解你的代码在做什么。你的代码的最终效果是（我怀疑你是否想要）：

这是您的代码，带有一些注释和小改动

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

我不知道你到底想做什么，但我已经在你的代码中添加了注释，以帮助你更好地理解你的代码在做什么。你的代码的最终效果是（我怀疑你是否想要）：

这是您的代码，带有一些注释和小改动

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

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

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

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

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

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

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

如果您想翻阅多个翻译，我会这样实现：

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

小提琴：

进一步：您应该为您的翻译提供一个类，这样您就可以轻松地用一行代码获取所有翻译：

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

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

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

小提琴：

进一步：您应该为您的翻译提供一个类，这样您就可以轻松地用一行代码获取所有翻译：

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

问题：我曾经设法添加htmls，但没有替换它们-

我认为您需要将所有这些项目添加到
$（“.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();
});

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

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

问题：我曾经设法添加htmls，但没有替换它们-

我认为您需要将所有这些项目添加到
$（“.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();
});

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

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

@alexnode：如果调用
ltransation[i]时出现了
@alexnode，则您的条件具有
这意味着你没有正确定义
ltransation
，而且
未定义
谢谢你，尼科，但我先接受了Adeneo的帖子。很抱歉，这个问题写得很糟糕。@alexnode:如果调用
ltransation[I]时出现这种情况，你的病情已经
@alexnode了
这意味着你没有正确定义
LTTranslation
，而且
没有定义
谢谢你，Nico，这是可行的，但我先接受了Adeneo的帖子。很抱歉，这个问题写得很糟糕。在调用
之前使用
.off（'click'）
。在你的例子中，
看起来没用。如果（I==7）{I=0；}，那么
也是如此
：只需使用专用比较器更改循环中的退出条件（<我不用相同的#触发器按钮在关闭之前和关闭之后做其他事情，我可以解除以前的事件处理程序的绑定。我不完全确定Jquery在那里到底做了什么，但在关闭之后它可以工作。使用
.off（'click'））
在调用
.on（'click'）之前，
在您的示例中看起来没什么用处。如果（i==7）{i=0；}
：只需使用独占比较器更改循环中的退出条件即可（<在关闭之前和关闭之后，我可以取消绑定以前的事件处理程序，而不是使用相同的#trigger按钮来做其他事情。我不完全确定Jquery在那里到底做了什么，但关闭之后它就可以工作了。我尝试在每次按下按钮时更改html。您有一个按钮（称为next）然后，当你按下它时，会看到一个接一个的文本。在结尾处有一个重置，从beggining开始。@alexnode-哦，好的，编辑了答案，对你有用吗？非常感谢，这很有效。我必须将开始转换为英语$（'[id$=“en”]'））。有一点奇怪的行为，但在它找到所有英语后，它添加了所有其他翻译，还有许多其他语言的翻译。！！！我不理解eq（idx）它是否获取所有ID并使用它们进行排序？eq（）只从匹配选择器的元素中获取一个元素，因此eq（0）将得到第一个等，idx是一个指数，它增加了ea