Solved

Using jQuery Variable in .html()

Posted on 2012-03-20
13
250 Views
Last Modified: 2012-03-25
Hello Experts!

I have a series of images that the user can click on. When the user clicks on one of the images, I want to replace the contents of div#Video with a jquery variable. I tried using .html("$" + this.id), but this isn't working. Do I need to use a different function? Thank you!

<div id="Video">Video Title Goes Here</div>

<img id="Agency" alt="Agency with Doug" src="myImage.png" />

$(document).ready(function() { 
		
  $Agency = '<h4>You are now viewing Agency with Doug Video.</h4>';

  $("img").click(function() {    
    $("#Video").html("$" + this.id);
  });
});

Open in new window

0
Comment
Question by:spoggles
  • 5
  • 3
  • 3
  • +2
13 Comments
 
LVL 58

Expert Comment

by:amit_g
Comment Utility
$("#Video").html($(this).attr("id"));

Open in new window

0
 

Author Comment

by:spoggles
Comment Utility
div#Video is only showing the word Agency and not the html stored in the variable $Agency.
0
 
LVL 13

Expert Comment

by:ansudhindra
Comment Utility
try

$("#Video").html(jQuery.globalEval("$" + $(this).attr('id')));
0
 

Author Comment

by:spoggles
Comment Utility
This did not work either. With the other code that was posted, it would switch the contents to "Agency". The below code does switch anything at all.

$("#Video").html(jQuery.globalEval("$" + $(this).attr('id')));
0
 
LVL 58

Expert Comment

by:amit_g
Comment Utility
$("#Video").html($Agency);

Open in new window

0
 

Author Comment

by:spoggles
Comment Utility
I could do this - $("#Video").html($Agency); - but I wanted to use the id of the image that was clicked. I have several images on screen and would like to avoid coding a big if/then/else statement.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:amit_g
Comment Utility
You should explain what you want and that way it is much simpler to answer. I think you need something like this (based on the markup and code you have posted)...

$(document).ready(function() { 
		
  $("img").click(function() {    
    $Agency = '<h4>You are now viewing ' + $(this).attr("alt") + " Video.</h4>';
    $("#Video").html($Agency);
  });
});

Open in new window

0
 
LVL 20

Expert Comment

by:Proculopsis
Comment Utility
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
  <style type='text/css'>
    .title { display: none; }
  </style>

<script type='text/javascript'>//<![CDATA[
$(function(){
$("img").click(function() {
    $("#Video").replaceWith($(".title").show());
});
});//]]>  

</script>

</head>
<body>
  <div id="Video">Video Title Goes Here</div>

<img id="Agency" alt="Agency with Doug" src="myImage.png" />

<h4 class="title">You are now viewing Agency with Doug Video.</h4>

</body>
</html>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
.......html(window["$"+this.id]);

$Agency is NOT a jQuery var but just a window scoped var
0
 
LVL 58

Expert Comment

by:amit_g
Comment Utility
There is no need to keep the $Agency outside of click handler. All the OP seems to need is the id or Alt attribute of clicked image and put it in a string.  http:#a37743386 should work.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
@amit of course not. There is a string per image.
An even better idea is a JS object array like
var texts = {
'Agency':'<.......>',
'Otherimage':'<......>',
'more'':'<.......>'
} // notice no comma at the end

And then use
$("#Video").html(texts[this.id]);
0
 
LVL 58

Expert Comment

by:amit_g
Comment Utility
@mplungjan, agreed.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Also add a class so not ALL images on the page gets a click

So code should look like

<div id="Video">Video Title Goes Here</div>
<img id="Agency" class="vidimg" alt="Agency with Doug" src="myImage.png" />
<img id="Video1" class="vidimg" alt="Video #1 with Doug" src="myImage.png" />
<img id="Video2" class="vidimg" alt="Video #2 with Doug" src="myImage.png" />

<script>
var texts = {
'Agency':'<h4>You are now viewing Agency with Doug Video.</h4>',
'Video1':'<h4>You are now viewing Video 1 with Doug Video.</h4>',
'Video2':'<h4>You are now viewing Video 2 with Doug Video.</h4>'
}

$(document).ready(function() { 
  $(".vidimg").click(function() {    
    $("#Video").html(texts[this.id]);
  });
});
</script>

Open in new window

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now