javascript - jQuery缩略图替换方法(需要添加A标签的解决方案)

Question

我有一个缩略图替换解决方案，我需要在 img 项目周围添加一个 a 标签，并且仍然具有相同的功能。

jQuery

$(".large").click(function () {
    var thumbRel = $(this).attr("rel");
    $(this).effect("transfer", { to: $(".thumbnail img[rel='" + thumbRel + "']") }, 1000);
});

$(".thumb").click(function () {
    $(".thumbnail [class^='thumb']").removeClass("current");
    $(this).addClass("current");
    $(".large").attr("rel", $(this).attr("rel"));

    $(this).effect("transfer", { to: $(".large") }, 1000);
    $(".large").animate({ opacity: 1 }, 1000);
    $(this).queue(function () {
        $(".large").attr("src", $(this).attr("src").replace("-thumb", ""));

        $(".large").animate({ opacity: 1 }, 1000);
        $(this).dequeue();
    });
});

标记与 Dot Net 混合，但在这里

<div class="product_images">        
    <div class="mainImage">            
        <a class="ShowProductImageDlg" href="#" onclick="ProductImagesDlgClientSide.showDialog('@Model.ProductToDisplay.Product.UrlSlug', 'Bottle'); return false;" >
            <img class="LargeImage" src="@Model.ProductToDisplay.Product.awsImageUrlLarge" alt="@Model.ProductToDisplay.Product.ProductName" />
        </a>            
    </div>
    <strong>Additional Images</strong>
    <div class="thumbnail">
        <ul>
            <li><a href=""><img class="SmallImage Bottle" src="@Model.ProductToDisplay.Product.awsImageUrlSmall" 
                    alt="@Model.ProductToDisplay.Product.ProductName" /></a></li>                

            <li><a href=""><img class="SmallImage BackLabel" src="@Model.ProductToDisplay.ProductAdditionalImageUrlSmall(awsProductImageType.BackLabel)"
                    alt="@Model.ProductToDisplay.Product.ProductName" /></a></li>            
        </ul>
    </div>    
</div>

最终目标是当图像本身只有 80x35 时，使图像的整个 div 都可点击(即 90 像素 x 90 像素)。

我想使用相同的 jQuery。

Answer 1

你可以这样做(see jsfiddle as a proof):

var link = jQuery('<a>', {
    'href': 'http://www.google.com/',
    'title': 'Dynamically generated link'
});

jQuery('img').wrap(link);

基本上，您首先创建一个链接(<a>元素)，然后将其包裹在img选择的图像周围选择器(您可以根据需要进行调整)。