jQuery动态div在飞行中带有href

Question

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

我的代码是：

$(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>

Answer 1

字符串连接：

<a href='" + tsource + "'

Answer 2

您需要使用字符串连接来使用变量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>");

});

视觉差异：

Answer 3

是的，使用字符串连接可以执行此操作：

$(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。