Javascript Open Window

Question

I'm trying to figure out how to make the javascript open the correct window.The div class .show within my javascript controls the content I want to open. However it is having trouble if multiple .show are being used.

Within one page I may have many of these .show classes and according to which one is pressed I would like that one to show.

For example

<span class="Show"><a href="#">Show</a></span> - 
 <div class="show">
 Content 1 
 </div>
<span class="Show"><a href="#">Show</a></span> - 
 <div class="show">
 Content 2 
 </div>

So if I click on the top show I will see Content 1 and if I click on the second I will see content 2.

At the moment with the current code provided when clicking the first show "content 1" a window opens with Content 1. If I click the second Content 1 appears and not Content 2.

Below is the javascript.

<script type="text/javascript">
 $("a").click(function () {
 var html = $(".show").html();
 var my_window = window.open("", "mywindow1", "width=350,height=150");
 $(my_window.document).find("body").html(html);
 });
</script> 

Any help would be greatly appreciated :)

I used this fiddle to get to where I am : http://jsfiddle.net/A72TH/

• Alex Shilman: Try this demo : jsbin.com/efeFukes/3/edit

Answer 1

Well this is pretty fragile but you can accomplish it as follows:

var html = $(this).parent().next("div.show").html();

The working sample is here: http://jsfiddle.net/RV86q/

Answer 2

Given your example, you'll want to first navigate to the parent element, then to the next item with a class of "show".

Here is a fiddle example: http://jsfiddle.net/A72TH/

$("a").click(function () {
 var html = $(this).parent().next(".show").html();
 var my_window = window.open("", "mywindow1", "width=350,height=150");
 $(my_window.document).find("body").html(html);
});

• amantur: ha ha you beat me by 20secs with exact same solution!

Answer 3

Try this

$(".window").click(function () {
 var html = $("#"+$(this).data('id')+"").html();
var my_window = window.open("", "mywindow1", "width=350,height=150");
 $(my_window.document).find("body").html(html);
});

FIDDLE