整合点击功能

Question

如何合并以下内容？

    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* 并获得相应的视频。

Answer 1

为图像和数据属性添加 class。

<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()

整合点击功能

Consolidate Click Functions

jquery

consolidation