Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Using jQuery Variable in .html()

Posted on 2012-03-20
13
Medium Priority
?
304 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

604 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