通過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添加內容

回答

相關問題