How to change content of div using jquery and variables?

Question

Hello i've been trying to change the content of a div using jquery and i have the following problem, this is my code:

<div id="pages">
   <div id='cssmenu'>
   <ul id="themenu">
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class=''><a href='#'><span>Modules</span></a></li>
   <li class=''><a href='#'><span>Degrees</span></a></li>
   <li class=''><a href='#'><span>About us</span></a></li>
 </ul>

In the js.js :

var Modules = "<p> 12346 </p>";
var Degrees = "<p> degrees </p>";

$(document).ready(function() {
$('ul#themenu li').click(function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
    **$('#content').html(Modules);**
});

What I am trying to do is have the content changes accordingly with the variable that matches the ul's list items span name, if you can think of a better way to do this please let me know, thank you in advance, Chris.

deitch · Accepted Answer · 2014-12-08 17:02:21Z

2

If I understood you correctly, you are trying to use the name of the menu item to determine which content to use. I would save it in an object like this:

var text = {
   Modules : "<p> 12346 </p>",
   Degrees : "<p> degrees </p>"
};

and then for the click:


$('ul#themenu li').click(function() {
    var section = $(this).find("span").text();
    $('li.active').removeClass('active');
    $(this).addClass('active');
    $('#content').html(text[section]);
});

FYI, it would probably be cleaner not to use the .text() but rather to add an ID or class to the li and key off of that.

answered Dec 8, 2014 at 17:02

deitch

14.8k15 gold badges75 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dm03514 · Accepted Answer · 2014-12-08 17:00:50Z

I believe you need to map your JS data to your HTML elements somehow. An easy way is to attach a class or an ID to your elements so you can access it directly, Right now it would include getting the text of your span tag then accessing your global data using that value

Using current model in your on click function

var key = $(this).find('span').text(); // Modules
window[key] // var Modules = "<p> 12346 </p>"

Using id and storing data in object:

<div id="pages">
   <div id='cssmenu'>
   <ul id="themenu">
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li id="Modules" class=''><a href='#'><span>Modules</span></a></li>
   <li class=''><a href='#'><span>Degrees</span></a></li>
   <li class=''><a href='#'><span>About us</span></a></li>
 </ul>

then you can easily access modules using the id $('#Modules')

If you need to make handling clicks completely generic you could create an object and have properties corresponding to the elements id

var DATA = {
  'Modules': 'darfdsa';
}

HThen on click

DATA[$(this).attr('id')];

A.B · Accepted Answer · 2014-12-08 17:10:22Z

See output by clicking last tree links ,You can do something like this

var Modules = "<p style='color:red;'> 12346 </p>";
var Degrees = "<p style='color:green;'> degrees </p>";
var Aboutus = "<p style='color:yellow;'> About us</p>";

$(document).ready(function() {
$('ul#themenu li').click(function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
  //alert($(this).find('span').text().replace(/\s+/g, ""));
  $('#content').html(window[$(this).find('span').text().replace(/\s+/g, "")]);
});
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pages">
   <div id='cssmenu'>
   <ul id="themenu">
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class=''><a href='#'><span>Modules</span></a></li>
   <li class=''><a href='#'><span>Degrees</span></a></li>
   <li class=''><a href='#'><span>About us</span></a></li>
 </ul>
     <div id="content"></div>

cнŝdk · Accepted Answer · 2014-12-08 21:32:15Z

1

Well just try:

$('#content').html(Modules);

Use the HTML DOM innerHTML Property to change elements content.

Or just using javascript and getElementById property:

document.getElementById("content").innerHTML=Modules;

edited Dec 8, 2014 at 21:32

answered Dec 8, 2014 at 16:58

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Your first line of code is invalid as jQuery objects have no innerHTML property.

Collectives™ on Stack Overflow

How to change content of div using jquery and variables?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related