使用<a> jQuery包装图像的问题

Question

大家好，

我有一堆图片，我需要包装在一个标签中，并添加到来自图片'+big‘的标签ref中，再加上使用图片lint作为链接的标题。

我这里的问题是，1)图像是包装与这个相同的href从第一个图像和标题属性没有显示。

这是我的jQuery

$(document).ready(function(){
        var ImgLink = $('.gallery img');

        var ImgTitle = ImgLink.attr('src');

        var ImgDes = ImgLink.attr('alt')

        ImgLink.each(function(){
                              $(this).wrap($('<a></a>')
                                            .attr('href', ImgTitle.replace(/\./, 'big.'), 'title'.ImgDes)
                                            )})

})

这是我的HTML

<img  alt="some alt" src="1.jpg"/></a>
<img  alt="some other alt" src="2.jpg"/></a>
<img  alt="and another alt" src="3jpg"/></a>

这就是结果

<a href="1big.jpg"><img  alt="some alt" src="1.jpg"/></a>
<a href="1big.jpg"><img  alt="some other alt" src="2.jpg"/></a>
<a href="1big.jpg"><img  alt="and another alt" src="3.jpg"/></a>

提前感谢您的帮助

Answer 1

您需要遍历图像并使用每个图像执行创建<a>的操作，因为在每种情况下都需要特定于图像的src。假设您的图像文件anme采用问题中指定的格式

$('img').each(function() {
    var $this = $(this);
    var href = this.src.replace(/\./, "big.");
    var title = $this.attr('alt');
    $this.wrap('<a href="' + href + '" title="' + title + '"></a>');
});

或者使用你的原始代码，

$(document).ready(function(){
        var ImgLink = $('.gallery img');

        ImgLink.each(function(){
            var $this = $(this);
            var ImgTitle = $this.attr('src');
            var ImgDes = $this.attr('alt');
            var anchor = $('<a href="' + ImgTitle.replace(/\./, "big.") + '" title="' + ImgDes + '"></a>');
            $this.wrap(anchor);
        });
})