如何設置一個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等於數據轉到值。

我嘗試以下，

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的滑塊內，如下

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

字符串連接使用+運營商來完成。

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

得到的錨標記看起來像下面如果`T = 'https://jsfiddle.net'

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

Answer 2

您需要正確逃生T中的字符串。 caption.append("<a href=\""+t+"\">test</a>");

Answer 3

t顯得String在caption.append("<a href=t>test</a>");，在上一行不參照t變量。嘗試使用attributes參數jQuery(html, attributes)來設置text,href屬性。

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