Solved

Using jQuery Variable in .html()

Posted on 2012-03-20
13
255 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
ID: 37743220
$("#Video").html($(this).attr("id"));

Open in new window

0
 

Author Comment

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

Expert Comment

by:ansudhindra
ID: 37743294
try

$("#Video").html(jQuery.globalEval("$" + $(this).attr('id')));
0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

Author Comment

by:spoggles
ID: 37743299
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
ID: 37743317
$("#Video").html($Agency);

Open in new window

0
 

Author Comment

by:spoggles
ID: 37743352
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
 
LVL 58

Expert Comment

by:amit_g
ID: 37743386
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
ID: 37743557
<!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
ID: 37743802
.......html(window["$"+this.id]);

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

Expert Comment

by:amit_g
ID: 37743814
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
ID: 37744153
@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
ID: 37744183
@mplungjan, agreed.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37745907
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

829 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