CODEWITHSUNDEEP
javascriptjquery
Robert hue
Robert hue

Reputation: 302

jQuery to replace content of a div with data stored in various variables dynamically

So this is my HTML. By default container shows some sample text. I want to replace it with corresponding HTML content stored in javascript variables.

<ul>
  <li><span class="link" id="item01">Menu 1</span></li>
  <li><span class="link" id="item02">Menu 2</span></li>
  <li><span class="link" id="item03">Menu 3</span></li>
  <li><span class="link" id="item04">Menu 4</span></li>
  <li><span class="link" id="item05">Menu 5</span></li>
</ul>

<div class="container">Sample Text</div>

Now HTML content is stored in variable item01, item02, item03 and so on. So this is the jQuery I created.

<script type="text/javascript">
  <!--
  $(document).ready(function() {
    var item01 = '<span>Content of item 1</span>';
    var item02 = '<span>Content of item 2</span>';
    var item03 = '<span>Content of item 3</span>';
    var item04 = '<span>Content of item 4</span>';
    var item05 = '<span>Content of item 5</span>';

    $('.link').on('click',function(){
       var $this = $(this);
       $itemNum = $this.attr("id");
       $('.container').html( $itemNum );
    });
  });
  //-->
</script>

But it's not working exactly as I want. It prints ID of the element in div container instead of HTML stored in that particular variable.

What am I doing wrong here?

Upvotes: 1

Views: 1734

Answers (3)

Simon
Simon

Reputation: 296

You are passing the value of the variable $itemNum to the html()-function of the container. This variable contains the id of the clicked element.

Try saving your html-pieces in a named array instead:

var htmlArray = new Array();
htmlArray["item01"] = '<span>Content of item 1</span>';
htmlArray["item02"] = '<span>Content of item 2</span>';

Then get the piece of html by accessing the array with your id:

$('.link').on('click',function(){
   var $this = $(this);
   var id = $this.attr("id");
   $('.container').html( htmlArray[id] );
});

But keep in mind that holding parts of your html markup in js-variables is not a good practice. This may be a hint on a bad overall architecture.

Working example: http://jsfiddle.net/tjb7bvmc/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

That is because you are getting the id attribute value. You should rather get the value of variable using eval(varname):

$('.link').on('click',function(){
   var $this = $(this);
   $itemNum = $this.attr('id');
   $('.container').html(eval($itemNum));
});

Working Demo

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337590

I would suggest you store the HTML in an object so you can access it by key:

var content = {
    item01: '<span>Content of item 1</span>',
    item02: '<span>Content of item 2</span>',
    item03: '<span>Content of item 3</span>',
    item04: '<span>Content of item 4</span>',
    item05: '<span>Content of item 5</span>'
}

$('.link').on('click',function(){
   $('.container').html(content[this.id]);
});

Upvotes: 5

Related Questions