通过javascript添加内容

我想创建一个页面，当你点击三个图像中的任何一个。它将内容插入图像链接上方空的div。通过javascript添加内容

这里是我的javascript代码：

<script type="text/javascript" src="js/jquery-1.8.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('img').click (function() { 
     $('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />); 
     return false; 
    }); 
}); 
</script>

，这是它是想达到的HTML：

<div class="deal_content"> 

</div> 
<div id="imagelink"> 
    <a href="#"> 
     <img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" /> 
    </a> 
    <a href="#"> 
     <img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />      
    </a>  
    <a href="#"> 
     <img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" /> 
    </a> 
</div>

我希望可以把新的图像div的deal_content类。

来源

2014-03-25 user3461092

Ÿu使用这样的jQuery的旧版本？使用'1.11.0'（最新） – vsync

为什么图像用''元素包装？这似乎很奇怪。 – vsync

在你的append方法中，如果你把双引号括起来并用单引号替换当前引号，它应该可以工作。 Append需要一个字符串或一个JQuery选择器，而不是标记。

来源

2014-03-25 18:28:50 evasilevsky

你需要做的元素，以一个字符串传递给它通过追加

$(document).ready(function() { 
$('img').click (function() { 
    $('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />'); 
    return false; 
}); 
});

来源

2014-03-25 18:27:11

不得不编辑psot，以便javascript显示为代码而不是文本来查看img src。对不起 – user3461092

@ user3461092 - 尝试将参数中的元素包装在''''中。 –

谢谢，现在我只需要弄清楚如何使它的全尺寸不是它下面的较小图像的宽度，当我改变javascript参数中的宽度时，似乎没有改变。 – user3461092

$('#imagelink').on('click', 'img', function(){ 
    $('.deal_content').append(this); 
});

，或者如果你要复制的图像：

$('#imagelink').on('click', 'img', function(){ 
    $('.deal_content').append(this.cloneNode()); 
});

是你想要的？这样它只会移动内部的图像imagelink元素

来源

2014-03-25 18:27:23 vsync

Considerting这是你想要什么：

祝新iamge被放在deal_content类股利。

你几乎有：

在您拥有的Javascript：

$(document).ready(function() { 
    $('img').click(function() { 
     $('.deal_content').append(); 
     return false; 
    }); 
});

你需要的html()代替append()。然后插入一个img标签，并从点击的图像中抓取src。

$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");

见http://jsfiddle.net/nivas/PA63e/

来源

2014-03-25 18:32:51 Nivas

通过javascript添加内容

回答

相关问题