Question

我在我的网页上设置了一个fancybox图库。我有一个要求，即有特定类别的图像的缩略图，但当有人点击该缩略图时，他们应该在花式框中显示该类别中的图像。因此，我在页面加载时所做的就是为各种类别填充javascript数组，并在其关联变量中包含子图像的值。

我的代码是：

<script>
var cat1=['a.jpg'];
    $( document ).ready(function() {
        $(".manual2").click(function() {
        var cat_gallery_id = this.id;
        $.fancybox(cat_gallery_id, {
            'padding'           : 0,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'image',
            'changeFade'        : 1
        });
       });
    });
</script>

在我的身体元素中，我有各种链接：

<a href="#" class="manual2" id="cat1">Click</a>

现在这个标签设置的方式是每个标签都有相同的类，只有它们的id会有所不同。当点击任何一个时，我正在通过this.id

获取ID

但是当我这样做时，它在错误控制台中给出了这样的错误：

GET http://localhost/myproject/cat1 404 (Not Found)

但是如果我静态传递相同的变量，而不是使用cat_gallery_id作为传递给fancybox函数的第一个属性，而不是

$.fancybox(cat1, {

fancybox完美无缺。从this.id

获取后，我确信我在做基本的价值分配方面做错了

任何帮助将不胜感激。

提前致谢。

Answer 1

cat1是一个变量数组，其中this.id代表一个'cat1'字符串，而不是数组变量 - 您可能想要做的是使用关联数组来存储数组：

var cats = {};
cats['cat1'] = ['a.jpg'];

$(".manual2").click(function(e) {
    e.preventDefault();
    $.fancybox(cats[this.id], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 1
    });
});

或者您可以使用window[this.id]将字符串转换为变量。例如

$.fancybox(window[this.id], ...etc

从每个图库的单个超链接打开动态图库的奇特框问题

1 个答案: