CODEWITHSUNDEEP
javascriptjqueryarraysloops
alexnode
alexnode

Reputation: 117

How to get the next element of an array with Jquery onclick

Hi all i am trying to change the html of an object from an array of htmls. But i am having problem iterating properly. I managed to make it work once EDIT After a few complains about the clarity of my question I will rephrase it. I have a div panel called .trpanel and a button called #trigger2 (it is a next button). Then I have a series of divs with texts that contain translations. I want when I press the button (called next) to cycle through the translations one by one on the 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  
    } 
    });

I am quite new to Javascript and i am getting a bit confused with the types of objects and arrays and loops. I managed once to add the htmls but without replacing them ... so they all came one after the other. The i tried to change the code and it hasn't worked since. Any help will be greatly appreciated.

Upvotes: 0

Views: 4728

Answers (5)

Tucker
Tucker

Reputation: 7362

I don't know what exactly you're tring to do, but I've put comments in your code to help you better understand what your code is doing. The net effect of your code is this (which I doubt you want) :

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

This is your code with some comments and minor changes

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

EDIT

To do what you want to do based on your comments, try this:

 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;

  });

Upvotes: 1

adeneo
adeneo

Reputation: 318212

A lot of guessing, but seems like you are trying to do this :

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

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

FIDDLE

Upvotes: 1

krishwader
krishwader

Reputation: 11371

From the question : I managed once to add the htmls but without replacing them -

I think you want to add all of these items into $(".trpanel"). First, dont take the HTML of each element, clone the element itself :

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

Then you could append everything into the container, so add the htmls but without replacing them. append takes in an array without replacing the previous html.

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

Upvotes: 1

Thomas Junk
Thomas Junk

Reputation: 5676

If you want to flip through several translations I would implement it that way:

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

Fiddle: http://jsfiddle.net/Xr9fz/

Further: You should give your translations a class, so you could easily grab all of them with a single line: 

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

Upvotes: 1

nicosantangelo
nicosantangelo

Reputation: 13726

I think you are trying to do this:

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].
}

Also, without seeing any html, I'm not sure but I think you may want to iterate over .trpanel ?

Something like:

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

Another thing (so you can make your code clearer I think). You can abstract the array population in a function, like this:

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

Upvotes: 1

Related Questions