0

大家好，我正在尝试从 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，但没有替换它们……所以它们一个接一个地出现。我试图更改代码，但从那以后一直没有用。任何帮助将不胜感激。

4

5 回答 5

1

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

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

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

小提琴

于 2013-06-23T19:27:27.720 回答
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);

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

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

$(".translation).each(function(index,value){ ltranslation.push(value); })
于 2013-06-23T19:32:34.543 回答
1

从问题：我设法添加了 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();
});

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

$("#trigger2").off('click').on('click',function() {
    $(".trpanel").append(ltranslation);
});
于 2013-06-23T19:32:44.913 回答
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
于 2013-06-23T19:20:35.047 回答
1

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

 $("#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;

  });
于 2013-06-23T19:25:38.003 回答