Question

我正在尝试创建一个页面，当您单击这三个图像中的任何一个时。它将内容插入图像链接上方的空div。

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

我希望将新图片放入deal_content班div。

Answer 1

您需要将元素设为字符串，以便通过追加传递

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

Answer 2

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

或者如果您想复制图片：

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

是你想要的吗？这样它只会移动imagelink元素

中的图像

Answer 3

在你的append方法中，如果你在HTML周围放置双引号并用单引号替换当前引号，它应该可以工作。 Append采用字符串或JQuery选择器，而不是标记。

Answer 4

考虑到这是你想要的：

我希望将新的iamge放入deal_content类div。

你快到了：

在您拥有的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/

通过javascript添加内容

4 个答案: