Solved

Using jQuery Variable in .html()

Posted on 2012-03-20
13
262 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

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

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 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