0

如何合并以下内容？

    var vid01 = $("#vid01");

    $("#img01").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(0));
        });
    });

    $("#img02").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(1));
        });
    });

    $("#img03").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(2));
        });
    });

    $("#img04").live('click', function() {
        $("#aaaLogo").fadeOut(100);
        $("#frame").fadeIn(100, function() {
            vid01.show(setVideo(3));
        });
    });

我已经尝试了一段时间，但我无法弄清楚。这是一个尝试：

var vid01 = $("#vid01");

        $("#img01, #img02, #img03, #img04").live('click', function() {
            $("#aaaLogo").fadeOut(100);
            $("#frame").fadeIn(100, function() {
                vid01.show(setVideo(0));
                vid01.show(setVideo(1));
                vid01.show(setVideo(2));
                vid01.show(setVideo(3));
            });
        });

上述尝试仅显示最后一个视频。我知道为什么，只是不知道如何将每个映射id到每个functions。

这并不意味着是顺序的。用户应该能够点击任何一个#img*并获得相应的视频。

4

1 回答 1

3

向图像和数据属性添加一个类。

<img id="img01" class="an_image" data-vid="1" />


$(".an_image").on('click', function() {
    $("#aaaLogo").fadeOut(100);

    var temp_var = $(this).data('vid');

    $("#frame").fadeIn(100, function() {
        vid01.show(setVideo(temp_var));
    });
});

您也不应该再使用 .live() （取决于您使用的 jQuery 版本），他们切换回 .on()

于 2015-08-31T20:49:14.210 回答