Replace "img" in jquery

Question

I am writing a "plugin" where I can replace news data on my homesite without reloading it. I click the news I want and it will load in a bigger area of the page. Everything works except the picture. I don't know why, but it won't replace it.

Here is my HTML:

<div id="col1-2"> 
 <div class="box orange">
 <div class="lb"><div class="rb">
 <div class="bb"><div class="blc">
 <div class="brc"><div class="tb">
 <div class="tlc"><div class="trc">
 <div class="content">
 <div class="box-content">
 <div class="reisen">
 <div class="infos"> 
 <img class="home__image" src="http://placehold.it/500x275"> 
 </div>
 <div class="text">
 <a class="home__headline" href="galerie_detail.html"><h1>Lady Salsa Festival 2012</h1></a></p>
 <p><h2 class="home__date">01. - 03. Juni 2012</h2></p>
 <p class="home__text">Sals Paradies in Saarbrücken! Bereits zum 8. Mal fand das Salsa-Paradies statt welches als Großevent in der Region Saarbrücken Salseros aus Frankreich, Luxemburg und Deutschland anzieht! Diesmal waren wieder einige Top-Stars aus der Salsa-Szene zu Gast. Die Vize-Weltmeister 2009 Anne und Anichi, die Könige des kubansichen Son, Mario & Madeline sowie aus Paris Lia & Leo eines der besten kubanischen Tanzpaare Europas.</p> 
 </div>
 <div class="clear"></div>
 </div>
 </div> 
 </div>
 <div class="content">
 <ul class="news__list">
 <ul class="home__list">
 <li><a href="#"><img src="http://placehold.it/238x131"><h1>Marvin Ramos & Kristin </h1></a><h2>01. - 0f3. Juni 2012</h2><p hidden>Salsa Paradies in Saarbrücken! Bereits zum 8. Mal fand das Salsa-Paradies statt welches als Großevent in der Region Saarbrücken Salseros aus Frankreich, Luxemburg und Deutschland anzieht! Diesmal waren wieder einige Top-Stars aus der Salsa-Szene zu Gast. Die Vize-Weltmeister 2009 Anne und Anichi, die Könige des kubansichen Son, Mario & Madeline sowie aus Paris Lia & Leo eines der besten kubanischen Tanzpaare Europas.</p> </li></ul>

Jquery:

 $(document).ready(function() {
 var clicktarget = $(".home__list a"); // Klick-Auslöser
 var hometarget = $(".home__player"); // Container
 var homehead = $(".home__headline"); // Headline
 var homedate = $(".home__date");
 var hometext = $(".home__text");
 var homeimage = $(".home__image");
 $(clicktarget).on("click", function() {
 if ($(this).hasClass("current")){
 return false;
 } else {
 $(clicktarget).removeClass("current"); // entfernt ".current"-Class von allen Elementen
 $(this).addClass("current"); // setzt ".current"-Class
 var homeheadline = $(this).closest("li").find("h1").html();
 $(homehead).html(homeheadline);
 var homenewsdate = $(this).closest("li").find("h2").html();
 $(homedate).html(homenewsdate);
 var homenewstext = $(this).closest("li").find("p").html();
 $(hometext).html(homenewstext);
 var homenewsimage = $(this).closest("li").find("img").html();
 $(homeimage).html(homenewsimage);
 $('html,body').animate({scrollTop:$("#video-top").offset().top}, 500);
 }
 });
});

• Jamiec: Just an FYI: Your vars at the top (clicktarget ,hometarget etc) are already jQuery objects so no need to wrap them again in $(..) lower down.

Answer 1

You should use jQuery's .attr() method instead. You are trying to edit the html inside the tag which is non-existant. Instead, try $(homeimage).attr("src","http://mynextimage.png");

• user2575867: yeah this somehow works, but i dont want to type in the src of the picture manually. i want it to automatically read out the <img src="placehold.it/238x131">
• Tro: Can't you make your homenewsimage variable be the src for the image rather than the entire HTML tag? If so, this would work just as well, otherwise you'll just have to use a bit more javascript to abstract the text between double quotes from your homenewsimage before then making that the src.
• user2575867: i´m really stuck somehow, at the moment i absolutly dont get it. i tried this now var homenewsimage = $(this).closest("li").find("img").html(); $(homeimage).attr("src", $(homenewsimage)); but it wont work
• Tro: var homenewsimage = $(this).closest("li").find("img").attr("src"); $(homeimage).attr("src", homenewsimage); should hopefully work.

Answer 2

Try like

var homenewsimage_url = $(this).closest("li").find("img").attr('src');
$(homeimage).html('<img src="'+homenewsimage_url+'"/>');

Easy to get the image src and put like image html with that src

Answer 3

the easiest way should be $(homeimage).src("http://example.com/image.jpg");