在jquery中替换“img”

时间:2013-07-12 09:43:23

标签: jquery html

我正在编写一个“插件”,我可以在不重新加载的情况下替换我的主页上的新闻数据。 我点击我想要的新闻,它将加载到页面的更大区域。 除了图片,一切都有效。我不知道为什么,但它不会取代它。

这是我的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);
        }
    });
});

3 个答案:

答案 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”);