如何減少圖像映射的此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

像這樣對<area>標簽進行一些重構

<area shape="circle" coords="220,97,15" alt="Auckland" title="Auckland" href="#" data-ref="aukl.hide">

從不必要的類中清理您的html，並為您提供更干凈的javascript代碼：

$(document).ready(function() {
    $("map area").click(function() {
        $(".map").toggle();
        $("#" + this.data("ref")).toggle();
    });
});

Answer 2

我有一支筆正在工作。 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();
    });


});

Answer 3

將類添加到將要單擊的所有div中，說“ lands ”，並使用以下代碼，

$(".lands").click(function() {
    var $this = $(this);
    $(".map").toggle();
    $this.toggle();
});

Answer 4

試試這個簡化的jQuery代碼

$(document).ready(function() {
  $('.box').on('click',function(){
      $(".map").toggle();
      $(this).toggle();
  });
});

Answer 5

每次您需要向許多不同的對象添加相同的行為時，一個好的模式可能就是使用函數和動態創建。

例如，在您的特定情況下，我希望

• 帶有地圖的圖像（無點）
• 位置列表（可能從數據庫中檢索到）
• 用於每個位置的代碼可創建正確定位在地圖上的點圖像

就像是：

function addLocation(x, y, name, data) {
    var dot = document.createElement("img");
    dot.className = "dot";
    dot.onload = function() {
        // x,y coordinates are relative to map size to account
        // for responsive designs
        dot.left = (x*mapContainer.offsetWidth - dot.offsetWidth/2) + "px";
        dot.top = (y*mapContainer.offsetHeight - dot.offsetHeight/2) + "px";
        mapContainer.appendChild(dot);
    };
    dot.src = "dot.png";
    dot.onclick = function() {
        showMap(name, data);
    };
}

這種添加/更改位置的方法僅需要更新數據庫（如果當前不值得使用數據庫，則需要更新靜態數據數組）。

手動添加位置名稱和圖表名稱（這是彼此之間的隨機小變化，例如gisborne->gisb但christchurch->chch ），是使頁面成為維護噩夢的一步。