基于var创建JavaScript填充href

我正在使用一个可爱的Lightbox插件，每个图像需要以下代码

<a href="images/portfolio/full/1.jpg"
   data-target="flare"      
   data-flare-plugin="shutter"
   data-flare-scale="fit"   
   data-flare-gallery="portfolio"
   data-flare-thumb="images/portfolio/thumbs/1.jpg"
   data-flare-bw="images/portfolio/bw/1.jpg"
   class="kleur multiple">    
       <img src="images/portfolio/thumbs/1.jpg" width="375px" height="250px"   />    
</a>            

让我解释一下代码： 它在

#容器

中搜索

a

，然后将

href

，

数据flare thumb

，

数据flare bw

标记附加到它，src/url/href图像位置为+var（与

数据flare title=”“

）+.jpg。 在插入这三个属性之后，它将插入一个

+var（与前面一样）+'.jpg'

我很确定这并不难写，但遗憾的是，我没有那么熟练地创建一个工作脚本

谢谢大家

---

奖励任务：那些成功地编写了上面的代码的人，包括一个跟踪拇指大小（宽度+高度）的脚本，并在旁边写下它的人，将从我这里得到一杯啤酒

如果您有这样的链接，例如：

<div id="container">
  <a href="#" data-flare-title="1.jpg"></a>
  <a href="#" data-flare-title="2.jpg"></a>
  <a href="#" data-flare-title="3.jpg"></a>
</div>

这将是一个可行的办法：

$(function(){

  $('#container a').each(function(){

    var $link = $(this),
        title = $link.data('flare-title');

    $link.attr('href', 'images/portfolio/full/' + title);
    $link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
    $link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);

    $link.append($('<img>', {
      src     : 'images/portfolio/thumbs/' + title,
      width   : '375px',
      height  : '250px'
    }));

  });

});

$（函数（）{
$（'#容器a'）。每个（函数（）{
var$link=$（此），
title=$link.data（'flare-title'）；
$link.attr（'href'，'images/portfolio/full/'+title）；
$link.attr（'data-flare-bw'，'images/portfolio/blackwhite/'+title）；
$link.attr（'data-flare-thumb'，'images/portfolio/thumbs/'+标题）；
$link.append（$（'
编辑：。
哇，谢谢你，伙计！还没有测试过，但我想我对这个部分还不是很清楚，因为高度一直是一样的（250px），但是每个拇指的宽度是不同的。对于不同的插件，宽度（和高度）首先必须定义内联。所以，若可以跟踪自身的宽度并编写内联，那个就太好了。--提前测试代码。谢谢！@SanderSchaeffer或者你们以前知道它并将它嵌入到
数据-*
属性中，或者你们。嗯。这两个都是合适的解决方案！非常感谢，伙计！作为书面形式十分钟，除非有空，否则给我发一封贝宝邮件，我会给你买一杯啤酒！=）@SanderSchaeffer谢谢你的好意，我5分钟的时间肯定不值得一杯啤酒！如果你来柏林，请随便做：）5分钟，你是个大师！：）-也许明年夏天吧，因为有去柏林的计划。呵呵，谢谢你，伙计！
<div id="container">
  <a href="#" data-flare-title="1.jpg"></a>
  <a href="#" data-flare-title="2.jpg"></a>
  <a href="#" data-flare-title="3.jpg"></a>
</div>

$(function(){

  $('#container a').each(function(){

    var $link = $(this),
        title = $link.data('flare-title');

    $link.attr('href', 'images/portfolio/full/' + title);
    $link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
    $link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);

    $link.append($('<img>', {
      src     : 'images/portfolio/thumbs/' + title,
      width   : '375px',
      height  : '250px'
    }));

  });

});