基于var创建JavaScript填充href

Create JavaScript fill href based upon var

本文关键字：填充 href JavaScript 创建 var 基于      更新时间：2023-10-28

我正在使用一个可爱的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>

我想和你们中的一些人一起写一段Javascript/jQuery脚本，它完成了上面这段代码的一些行。

让我解释一下：

- full image (href),
- blackwhite version (data-flare-bw=""),
- lightbox thumb (data-flare-thumb="")
- and the page thumb (<img src=""/>)

所有文件都有一个共同点：文件名相同，只是路径不同。因此，我想编写/拥有一个基于var的脚本，它可以自动编写这些代码行。不仅是SRC，还有属性本身，因此href=""、data-flare-bw=""、data-flare-thumb=""和<image src=""/>

由于我不是Jquery大师，我会试着写下代码，我想这在一定程度上会让你们知道应该发生什么：

$function(InsertAttributesAutomaticcly() {
    var filenames = $('#container a').attr('data-flare-title', this')
    $('#container a').each(function() {
        $(this).append('href', 'images/portfolio/full/' + 'filenames' + '.jpg');
        $(this).append('data-flare-bw', 'images/portfolio/blackwhite/' + 'filenames' + '.jpg');
        $(this).append('data-flare-thumb', 'images/portfolio/thumb/' + 'filenames' + '.jpg');
        $(this).html('<img src=" 'images/portfolio/thumb/' + 'filenames' + '.jpg'">');
    });
});

让我解释一下代码：它在#container中搜索a，然后将href、data-flare-thumb、data-flare-bw标记附加到其中，带有src/url/href图像位置，该位置为+var（与data-flare-title=""相同）+.jpg。在插入这三个属性之后，它在a标签中插入一个<img>，src为<path> + var (as before) + '.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'
    }));
  });
});

编辑：参见fiddle。

相关文章：