Html 单击5个热点显示一条消息

我基本上有一个有5个热点链接的图像。我希望有一种方法能够显示一个“做得好”的按钮，一旦所有五个都被点击。我已经查看了堆栈，但没有发现任何与此相关的内容。有没有一种简单的有条件的方法可以做到这一点？上次我是在flash中做的，这很容易，但所有的编码知识现在都是多余的，我必须重新开始：(

---

您可以使用JavaScript实现这一点-对于您的每个区域，您可以调用一个函数，该函数设置一个变量以指示该区域已被单击（可能会发送一个区域“id”以区分不同的区域）。这可以通过

href

attribte on区域完成，使用

javascript:

前缀调用已知的函数名（带有可能的值）

---

在事件处理程序中，您还将测试所有区域，以查看它们是否已被单击（即，它们关联的变量是否已被单击），如果已被单击，则显示成功按钮。

为此，您需要javascript/jquery。下面是jquery的一个小示例

Jquery：

function allclicked() {
    var allclick = true;

    for (var i=0; i<5; i++){
        if(!$("area:eq("+i+")").hasClass("wasclicked")){
            allclick = false;
        }
    }
    if (allclick){
        if ($("#a-wild-div-appeares").length < 1)
            $("body").append("<div id='a-wild-div-appeares'>Content of the div</div>");
    }
};


    $("area").on("click", function(){
        $(this).addClass('wasclicked');
        allclicked();
    });

函数allclicked（）{
var allclick=true；
对于（var i=0；iIs，有没有办法让div标记显示而不是警报框？我将…“警报”（“所有区域均已单击”）；“更改为…”if（allclick）{$（“show”）.show（）；“因为我想让div显示，但我无法使其正常工作
function allclicked() {
    var allclick = true;

    for (var i=0; i<5; i++){
        if(!$("area:eq("+i+")").hasClass("wasclicked")){
            allclick = false;
        }
    }
    if (allclick){
        if ($("#a-wild-div-appeares").length < 1)
            $("body").append("<div id='a-wild-div-appeares'>Content of the div</div>");
    }
};


    $("area").on("click", function(){
        $(this).addClass('wasclicked');
        allclicked();
    });