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

Question

我基本上有一个图像与5个热点链接在上面。我希望有一种方法，能够显示一个‘做得好’按钮，一旦所有的五个被点击。我检查过Stack，但没有找到任何能做到这一点的东西。有一个简单的有条件的方法来做这件事吗？上一次我这么做是很容易的，但是所有的编码知识现在都是多余的，我必须重新开始：

<img src="/park.jpg" width="760" height="500" usemap="#Map" border="0" />
   <map name="Map" id="Map">
   <area shape="rect" coords="40,39,147,95" href="#" />
   <area shape="rect" coords="383,66,534,129" href="#" />
   <area shape="rect" coords="71,209,218,276" href="#" />
   <area shape="rect" coords="460,224,626,282" href="#" />
   <area shape="rect" coords="136,326,511,431" href="#" />
   </map>

Answer 1

为此您需要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();
    });

Answer 2

您可以为此使用JavaScript -对于每个区域，您可以调用一个设置变量的函数来指示已单击的区域(可能会发送一个区域"id“来区分不同的区域)。这可以通过区域上的href attribte来完成，使用javascript:前缀调用一个已知的函数名(带有一个可能的值)。

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