Question

我想有一个简单的解决方案，但javascript不是我强大的一面。这是用于在WP电子商务中交换产品变体图像（拇指）的脚本的一部分。

我的灯箱效果适用于主产品图片，但我不能让它在交换的缩略图上工作（通过简单地添加/删除带有JS的.hidden类来显示/隐藏）。

如何将rel =“lightbox”添加到交换图像中的链接？请参阅以下代码：

jQuery(function($){
$("div.wpsc_variation_forms select.wpsc_select_variation").change(function() {
    var productForm = $(this).parents("form.product_form");

    var data = {
        action: 'get_variation_image_url',
        form_values: $("input[name=product_id],div.wpsc_variation_forms select.wpsc_select_variation", productForm).serialize()
    };

    var productColumn = productForm.parent(".productcol");
    var imageColumn = productColumn.siblings("div.imagecol");

    imageColumn.css("opacity", 0.5);

    jQuery.post(wpsc_ajax.ajaxurl, data, function(response) {
        var data = $(response.split(/\n/));

        if(response == ""){
            data = $([]);
        }

        var images = imageColumn.children();

        if(images.length == 0){
            imageColumn.css("opacity", 1);
            return;
        }

        var hiddenImages = images.filter(".hidden");
        var visibleImages = images.not(".hidden");

        var imageColumnContainsVariationImages = hiddenImages.length > 0;

        if(imageColumnContainsVariationImages){
            var variationImages = visibleImages;
            variationImages.remove();
        } else {
            var originalImages = visibleImages;
            originalImages.hide().addClass("hidden");
        }

        var newVariationImageShouldBeAdded = data.length > 0;

        if(newVariationImageShouldBeAdded){
            data.each(function(){
                var imageUrl = this.split("***");
                var imageLink = images.first().clone(true).removeClass("hidden");

                imageLink.attr("href", imageUrl[0]);

                var image = imageLink.find("img");
                image.removeAttr("src");
                image.attr("src", imageUrl[1]);

                imageLink.show().appendTo(imageColumn);
            });
        } else {
            images.show().removeClass("hidden");
        }

        imageColumn.css("opacity", 1);
    });
  });
});

提前感谢，你是最好的！

Answer 1

只需：

imageLink.attr("rel", "lightbox");

编辑：我认为您需要将插件重新应用于克隆元素：

imageLink.attr("rel", "lightbox").lightbox();

Answer 2

这是另一个属性，因此您也可以使用.attr。 .attr还支持将多个属性作为对象传递。你也可以结合链接。最后，.attr会覆盖现有属性，因此.removeAttr是多余的。

if(newVariationImageShouldBeAdded){
        data.each(function(){
            var imageUrl = this.split("***");

            var imageLink = images.first()
                                  .clone(true)
                                  .removeClass("hidden")
                                  .attr({ href: imageUrl[0],
                                          rel:  "lightbox" })
                                  .show()
                                  .appendTo(imageColumn);

            var image = imageLink.find("img")
                                 .attr("src", imageUrl[1]);
        });

Answer 3

这应该这样做：

if (newVariationImageShouldBeAdded) {
    data.each(function() {
        var imageUrl = this.split("***"),
            imageLink = images.first().clone(true).removeClass("hidden");

        imageLink.attr("href", imageUrl[0]);

        var image = imageLink.find("img");
        image.removeAttr("src");
        image.attr("src", imageUrl[1]);
        image.attr("rel", "lightbox");

        imageLink.show().appendTo(imageColumn);
    });
}

如果可以，请告诉我 - 如果没有，可能需要查看其他代码吗？

将rel =“lightbox”属性添加到javascript生成的图像链接

3 个答案: