Question

全部，

我有一堆图像需要包装在标签中并添加到图像'+ big'的标签引用中加上使用图像lint作为链接的标题。

我遇到的问题是，1）图像用第一张图像中的相同href包装，并且没有显示title属性。

这是我的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。假设您的图像文件anmes采用问题中指定的格式

$('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);
        });
})

使用<a> jQuery problem</a>包装图片

1 个答案: