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

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

<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（）

合并点击功能

1 个答案: