2

我正在使用下面的代码创建一个动态 div 并将其插入到图像上。一切都很好。我也从隐藏的 div 中获取源代码，如何将源代码放入<a href我使用动态 div 创建的源代码中？

我的代码是：

$(document).ready(function() {

    var tsource = $('#thesource').val();                           
    $(".gdl-blog-full").find("img:first").after("<div style='width:650px; height:30px; float: left; top:0; position: absolute; margin-top:10px;'><div style='height:23px; padding-top:6px; padding-left:4px; padding-right:4px; background-color:#000; opacity:0.7; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>Πηγή: <a href='tsource' style='color:#fff; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>MyLink</a></div></div>");

});

还有身体：

<div class="gdl-blog-full" style="width:650px; height:390px;">
    <img src="4114feed_L.jpg" alt="4114ed_L" width="650" height="390" class="alignnone size-full wp-image-8519">
    <input type="hidden" id="thesource" name="thesource" value="google.com" />
</div>
4

3 回答 3

3

字符串连接：

<a href='" + tsource + "'
于 2013-11-04T14:02:25.553 回答
3

您需要使用字符串连接来使用变量的值tsource

$(document).ready(function () {

    var tsource = $('#thesource').val();
    $(".gdl-blog-full").find("img:first").after("<div style='width:650px; height:30px; float: left; top:0; position: absolute; margin-top:10px;'><div style='height:23px; padding-top:6px; padding-left:4px; padding-right:4px; background-color:#000; opacity:0.7; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>Πηγή: <a href='" + tsource + "' style='color:#fff; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>MyLink</a></div></div>");

});

视觉差异：

在此处输入图像描述

于 2013-11-04T14:03:00.910 回答
1

是的，使用字符串连接你可以这样做：

$(document).ready(function () {

   var tsource = $('#thesource').val();
   var div_str = "<div style='width:650px; height:30px; float: left; top:0; position:        absolute; margin-top:10px;'><div style='height:23px; padding-top:6px; padding-left:4px; padding-right:4px; background-color:#000; opacity:0.7; color:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>Πηγή: <a href='" + tsource + "' style='color:#fff; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:12px;'>MyLink</a></div></div>";
   $(".gdl-blog-full").find("img:first").after(div_str );
});

此外，如果您想添加动态 html，您可以使用 Underscore js 使用模板，您可以通过将参数传递给该模板来插入 html。

于 2013-11-04T14:31:58.503 回答