我正在编写一个“插件”,我可以在不重新加载的情况下替换我的主页上的新闻数据。 我点击我想要的新闻,它将加载到页面的更大区域。 除了图片,一切都有效。我不知道为什么,但它不会取代它。
这是我的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);
}
});
});
答案 0 :(得分:1)
您应该使用jQuery的.attr()
方法。您正在尝试编辑不存在的标记内的html。相反,请尝试$(homeimage).attr("src","http://mynextimage.png");
答案 1 :(得分:0)
尝试
var homenewsimage_url = $(this).closest("li").find("img").attr('src');
$(homeimage).html('<img src="'+homenewsimage_url+'"/>');
轻松获取图片src
并将图片html与src
答案 2 :(得分:0)
最简单的方法应该是$(homeimage).src(“http://example.com/image.jpg”);