如何将链接的 href 设置为等于脚本中的变量

Question

我有以下标记来显示 jQuery 滑块内的图像：-

<li>
    <figure> <a href="~/img/big.jpg" class="thumb">
                <img src="~/img/small.jpg" alt=""/>
                <span>
                    <strong>Project name:</strong><em>Villa</em>
                    <img src="~/img/searchsmall.png" alt="" 
                       data-goto="@Url.Action("OurProjects", "Home", new { name = "villaA" })"/>
                </span>
            </a>

    </figure>
</li>

在加载滑块内图像的回调函数中，我想在当前占位符内添加一个新的<a>，其中链接的 href 等于 data-goto 值。

我尝试了以下，

  function loadImage(src, callback) {
      var img = $('<img>').on('load', function () {
          callback.call(img);
      });

      img.attr('src', src);
      var allcaptions = $("figure span");

      // setTimeout is a hack here, since the ".placeholders" don't exist yet
      setTimeout(function () {
          $(".placeholder").each(function (i) {

              // in each .placeholder, copy its caption's mark-up into it
              // (remove the img first)
              var caption = allcaptions.eq(i).clone();

              var t = $(this).find("img").attr('data-goto');

              caption.append("<a href=t>test</a>");
              caption.find("img").remove();
              $(this).append("<div class='caption'>" + caption.html() + "</div>");
          });
      }, 500);
  }

但生成的链接将具有“未定义”作为其href。

编辑

占位符类会在jquery的slider里面，如下

EDIT-2

这是页面加载时的标记：-

<li>
    <figure> 
        <a href="~/img/big.jpg" class="thumb">
            <img src="~/img/small.jpg" alt=""/>
            <span>
                <strong>Project name:</strong><em>Villa</em>
                <img src="~/img/searchsmall.png" alt="" 
                     data-goto="@Url.Action("OurProjects", "Home", new { name = "villaA" })"/>
            </span>
        </a>
    </figure>
</li>

现在，当您单击 small.jpg 图像时，big.jpg 将显示在滑块内。这是滑块内的标记

<div id="galleryOverlay" class="visible" style="display: block;">
<div id="gallerySlider" style="left: 0%;">
<div class="placeholder">
<img src="/img/big.jpg">
<div class="caption">
<div class="caption">
<strong>Project name: </strong>
<em>Villa</em>
<img data-goto="/OurProjects?name=villaA" alt="" src="/img/searchsmall.png">
<a>test</a>
</div>
</div>
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder">
<div class="placeholder"> 

链接没有 href 或 href 未定义。这是我的问题吗？

EDIT-3

这里是 firbug 屏幕

Answer 1

t 似乎是 String 在 caption.append("<a href=t>test</a>"); ，而不是在上一行引用 t 变量。尝试使用 jQuery( html, attributes ) 的 attributes 参数设置 text ， href 属性。

var t = $(this).find("img").attr('data-goto');
caption.append($("<a />", {"text":"test", "href":t}));

Answer 2

您需要正确转义 t 中的字符串。 caption.append("<a href=\""+t+"\">test</a>");

Answer 3

字符串连接是使用+ 运算符完成的。

caption.append("<a href='" + t + "'>test</a>");

如果 `t = 'https://jsfiddle.net'，生成的锚标记将如下所示

<a href='https://jsfiddle.net'>test</a>