Question

大家好我想尝试从htmls数组中更改对象的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很新，我对对象类型和数组和循环有点困惑。我设法一次添加htmls但没有替换它们......所以他们都是一个接一个地来。我试图改变代码，从那以后它就没有用了。任何帮助将不胜感激。

Answer 1

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

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 2

我不知道你究竟要做什么，但我在你的代码中添加了注释，以帮助你更好地理解你的代码在做什么。你的代码的净效果是这个（我怀疑你想要）：

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

这是您的代码，包含一些注释和细微更改

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

Answer 3

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

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

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

FIDDLE

Answer 4

如果您想翻阅几个翻译，我会以这种方式实现：

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 5

从问题：我管理过一次添加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);
});

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

5 个答案: