合并点击功能 [英] Consolidate Click Functions

问题描述

如何合并以下内容?

    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));
        });
    });

我已经尝试了一段时间，但无法弄清楚.这是一种尝试:

I've been trying for a while but I can't figure it out. Here's one attempt:

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.

The above attempt only shows the last video. I know why, just don't know how to map each id to each of those functions.

这并不意味着是连续的.用户应该可以点击任意#img*并获取相应的视频.

This isn't meant to be sequential. The user should be able to click on any #img* and get the corresponding video.

推荐答案

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

Add a class to the images and a data attribute.

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

You shouldn't use .live() anymore either (depending on the jQuery version you are using), they switched back to .on()

这篇关于合并点击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！