CODEWITHSUNDEEP
javascriptjqueryhtml
David Debnar
David Debnar

Reputation: 209

Changing the content of a div with javascript

I have a function ImageIndexing(type,data) that will return a string according to the two variables. Than I have classes: portoflioTitle, portfolioThumbnail, portoflioBig; and I need to change their content, src, id accordingly to their data-title, data-thumb and data-big. Its really hard to explain, so let me try.

So:

  1. After the page loads a function is executed.
  2. First, the function changes the innerHTML (content) of all the divs with class portfolioTitle. It changes it trough the ImageIndexing function to which it passes 'title' as the type and its data-title as the data. The ImageIndexing function will then return the string we need to change the innerHTML to. (can you understand it so far?)
  3. It repeats the same with the other classes. With portfolioThumbnail it passes 'image' as the type and its data-thumb as the data and than sets the returned string to its src. portfolioBig passes 'big' and data-big and uses the string as its id.

Upvotes: 1

Views: 163

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: You should use .attr to get the value of the element. Updated jsFiddle here

I am not sure what you really want, but from your comment I believe you want to know hwo to pass data-x and set the innerHTML of the corresponding div.

Below is just rough version, let us know if you have any questions.

   $('div.portoflioTitle').each (function(index) {

      $(this).html(ImageIndexing(this.title, $(this).attr('data-title')));

    });

    function ImageIndexing(type, data) {
       //do w.e you have to do and return

       return "<span>can return anything that you wanna set inside the div</span>";
    }

Upvotes: 1

Related Questions