javascript - 如何减少图像映射的 jquery 切换代码

Question

我正在尝试找出如何减少这段代码!它基本上隐藏一个图像，然后根据单击的图像映射区域显示一个 div!

我这里有一个工作演示的代码笔:http://codepen.io/naniio/pen/wBExYq

$(document).ready(function() {
    $(".auckland").click(function() {
        $(".map").toggle();
        $("#aukl.hide").toggle();
    });

    $(".gisborne").click(function() {
        $(".map").toggle();
        $("#gisb.hide").toggle();
    });

    $(".wellington").click(function() {
        $(".map").toggle();
        $("#well.hide").toggle();
    });

    $(".nelson").click(function() {
        $(".map").toggle();
        $("#nel.hide").toggle();
    });

    $(".christchurch").click(function() {
        $(".map").toggle();
        $("#chch.hide").toggle();
    });

    $(".queenstown").click(function() {
        $(".map").toggle();
        $("#queen.hide").toggle();
    });

    $(".otago").click(function() {
        $(".map").toggle();
        $("#ota.hide").toggle();
    });
});

我尝试过使用 find 和其他 jquery 方法，但我一定是在错误的地方查找

任何帮助都会很棒我是 jQuery 的新手，但对堆栈溢出并不陌生，我可以想象这对某些人来说是一个简单的问题/修复，并且可能会受到严厉的评价或被忽略!但对于那些不断帮助这个社区的人，谢谢! :)

Answer 1

我这支笔里有东西在工作。 http://codepen.io/anon/pen/ByOEam只需在区域标签中添加一个额外的属性即可

$(document).ready(function() {
    $(".clickable").click(function() {
       var toHide = $(this).attr('data-hide');
        $(".map").toggle();
        $("#"+toHide).toggle();
    });

    $(".hide").click(function() {
      $(".map").toggle();
      $(this).toggle();
    });


});