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滑块内，如下所示

修改-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 =＆＃39; https://jsfiddle.net＆＃39;

，结果锚标记将如下所示

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

Answer 2

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 3

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

如何设置链接的href以等于我的脚本中的变量

3 个答案: