jquery，js显示img悬停在地图区域，但也选中

Question

我此刻被困。我想我几乎就在那里，但我似乎无法弄明白。我现在用Google搜索了一天，我就被卡住了。

我有一张世界地图的图片，有多个可选的图片。将鼠标悬停在大陆上时，会显示可选图像。当您再次使用鼠标移动时，它将自动不再显示。这样就可以了。

我现在尝试的是，如果我点击非洲大陆，图像就会停留在那里。如果我再次点击，它将被取消选中。此外，您应该只能选择1个大陆。因此，如果我决定点击欧洲，而亚洲被选中，他应该自动取消选择亚洲。

我的问题是，如果其中一个正在工作，另一个将被打破。如果悬停工作正常，则单击时图像不会保持选中状态。如果您可以点击图像，则悬停不再起作用，他将在每次点击时选择所有内容（当时不是一个大陆）。他不会取消选择之前点击的区域。

jQuery / js （这是在我的document.ready中）

$(document).on('mouseover','map#world area',function(e){
    var el = $(this);
    var elclass = el.attr('class');
    $('.world-'+elclass).show();
    e.preventDefault();
}).on('mouseleave','map#world area',function(e){
    var el = $(this);
    var elclass = el.attr('class');
    $('.world-'+elclass).hide();
    e.preventDefault();
}).on('click','map#world area',function(e){
    var el = $(this);
    var elclass = el.attr('class');
    $('.world-'+elclass).show();
    $('select#continent').val(elclass).attr('selected','selected');

    $(elclass).off("mouseleave"); // aanpassen

    e.preventDefault();
});

PHP / HTML，表单

<map name="world" id="world">
    <div id="worldlayers">
        <img src="../images/world/world.jpg" alt="<?php echo EUROPE; ?>" usemap="#world" class="dblock" border="0"/>
        <img src="<?php echo BASEHREF; ?>images/world/south-america.png" usemap="#world" class="world-south-america" />
        <img src="<?php echo BASEHREF; ?>images/world/north-america.png" usemap="#world" class="world-north-america" />
        <img src="<?php echo BASEHREF; ?>images/world/asia.png" usemap="#world" class="world-asia" />
        <img src="<?php echo BASEHREF; ?>images/world/europe.png" usemap="#world" class="world-europe" />
        <img src="<?php echo BASEHREF; ?>images/world/australia.png" usemap="#world" class="world-australia" />
        <img src="<?php echo BASEHREF; ?>images/world/africa.png" usemap="#world" class="world-africa" />
    </div>

    <area class="south-america" shape="poly" coords="289,333,291,343,283,350,283,357,283,361,290,373,294,383,304,389,305,401,305,413,302,425,298,437,295,447,293,458,292,469,294,481,303,489,315,493,322,489,337,477,331,473,316,468,319,463,316,454,322,448,326,443,337,437,343,428,355,412,355,405,363,400,367,401,371,395,376,390,374,378,384,370,385,361,374,354,357,351,352,346,345,335,331,331,321,324,309,321,299,323,291,327" alt="south-america">
    <area class="north-america" shape="poly" coords="208,143,196,139,183,134,170,140,161,143,153,136,138,134,124,129,116,133,103,141,98,145,102,152,104,157,96,162,101,168,106,170,104,175,98,182,97,189,108,195,115,196,110,201,96,211,98,217,116,210,128,204,135,195,143,191,154,190,163,198,170,207,170,214,172,217,178,223,186,231,188,235,189,243,190,251,193,260,198,269,202,276,209,281,210,288,216,298,222,299,228,300,229,308,240,314,251,317,256,315,261,321,270,327,278,333,288,334,290,326,292,321,312,314,314,305,303,303,289,296,285,289,284,281,291,275,297,269,299,259,306,253,316,249,327,241,340,237,346,234,342,224,338,213,332,203,324,195,322,187,321,175,324,165,326,158,320,151,314,142,311,133,302,125,293,117,286,111,289,102,290,93,290,83,302,87,308,93,318,100,326,108,330,111,335,123,336,134,337,143,336,150,337,161,342,169,344,176,348,181,352,189,360,193,365,191,370,181,370,172,379,164,388,157,392,150,402,148,410,138,413,126,413,116,418,108,422,101,420,91,418,82,420,69,420,59,423,48,428,39,433,31,425,25,418,23,411,12,397,5,380,5,365,4,355,8,343,14,334,19,325,18,318,12,309,7,301,7,286,9,275,13,268,19,261,25,252,33,250,38,246,47,242,53,236,61,225,60,216,65,210,72,203,78,196,87,190,95,188,101,188,110,186,120,184,129,194,132,202,131,206,136" alt="north-america">
    <area class="africa" shape="poly" coords="442,266,438,273,432,278,434,284,429,287,425,291,420,299,421,305,421,310,417,318,421,328,428,333,434,338,440,341,450,341,458,338,466,338,472,341,476,345,470,351,476,358,479,364,484,373,480,383,481,389,485,395,486,405,488,413,492,418,494,427,502,428,509,428,517,425,522,419,525,412,528,406,533,399,545,400,549,406,557,404,561,394,562,387,566,377,561,372,553,379,544,376,542,368,542,362,542,356,549,348,556,342,560,337,566,327,565,323,556,325,549,325,543,317,539,311,534,304,531,296,526,289,524,283,523,280,510,279,503,275,497,280,489,275,484,272,481,269,479,263,464,263,456,266,448,267" alt="africa">
    <area class="europe" shape="poly" coords="428,167,425,161,422,157,414,157,405,157,401,163,402,167,408,173,415,177,423,181,438,196,440,202,438,207,432,210,433,217,436,225,442,222,444,227,442,232,448,237,452,241,441,243,434,248,435,255,435,259,438,264,444,266,454,264,456,259,460,256,466,251,470,249,472,259,478,259,482,263,488,267,495,261,499,263,503,268,512,272,516,269,511,263,509,257,514,254,518,249,520,244,523,241,528,243,534,240,536,245,542,247,548,250,554,253,562,255,558,248,558,241,562,237,558,233,554,228,557,226,562,223,566,219,571,221,576,224,580,223,582,219,579,211,577,206,577,201,582,191,581,185,582,176,582,169,587,163,594,153,593,143,588,139,584,133,578,130,576,125,576,121,578,112,583,105,588,101,594,97,599,95,606,91,603,87,598,39,590,34,583,31,572,32,564,36,554,40,526,46,511,47,500,44,490,49,479,54,476,57,476,65,479,71,482,77,483,83,489,90,496,110,497,119,500,129,501,136,490,139,484,146,482,149,484,153,481,163,478,167,470,173,465,178,464,185,464,192,467,197,470,200,472,204,472,209,467,214,459,219,455,212,452,204,451,198,454,189,456,185,449,180,432,171" alt="europe">
    <area class="australia" shape="poly" coords="756,353,757,368,758,373,758,383,752,383,748,379,750,373,743,372,734,370,728,375,721,378,716,383,712,387,700,393,696,397,696,404,698,409,700,417,702,421,700,426,708,428,715,425,720,424,727,421,734,421,743,424,744,431,749,429,752,435,757,438,762,441,763,449,768,453,774,449,778,443,809,461,813,464,820,460,824,454,828,449,832,445,836,439,837,434,831,428,828,424,820,393,817,383,815,377,811,369,798,362,784,355,775,349,765,351" alt="australia">
    <area class="asia" shape="poly" coords="756,369,754,353,746,349,738,348,734,343,730,335,726,325,721,317,718,310,716,301,725,295,731,293,735,288,740,280,744,276,753,273,758,269,759,263,761,256,761,253,767,250,771,245,780,241,787,233,789,228,798,219,803,209,807,201,809,194,818,190,830,184,841,180,840,170,845,164,852,169,856,169,860,165,861,157,852,153,843,144,848,133,844,127,836,128,832,133,827,139,818,137,810,140,800,137,798,133,790,129,784,132,777,123,782,102,775,97,766,93,756,91,744,92,745,103,749,109,752,116,752,125,743,125,736,123,732,115,724,111,719,110,714,116,708,113,703,109,699,99,698,89,691,85,689,79,686,72,683,63,676,57,670,48,664,41,662,34,654,35,650,39,650,43,649,51,650,57,656,64,661,67,666,71,668,75,670,83,670,92,662,89,654,93,648,97,640,101,632,105,631,112,625,113,612,114,605,117,602,122,600,133,601,137,603,149,594,143,594,152,592,158,586,167,583,171,582,175,582,182,582,185,582,191,580,197,578,203,581,211,581,220,580,225,571,224,566,219,558,224,556,228,561,237,568,238,570,243,567,247,570,255,570,262,560,261,557,254,550,251,544,251,537,253,533,251,526,252,520,253,515,253,510,258,511,263,515,268,520,267,527,267,530,267,532,270,531,276,530,279,523,279,528,286,534,289,536,293,538,297,540,301,545,311,548,317,548,323,557,318,569,313,576,308,581,302,582,301,587,295,594,294,600,299,607,301,610,303,612,307,613,316,618,322,619,331,626,337,632,337,633,331,630,326,629,319,632,313,638,309,645,306,654,306,658,313,652,323,655,333,658,343,665,350,672,357,680,363,696,367,704,369,719,371,732,369,740,367,746,363,748,367" alt="asia">
</map>
<?php echo CONTINENTQUOTE." ".$location."!"; ?><br>

<fieldset>
    <label for="destination"><?php echo DESTINATION.": "; ?></label>
    <select id="continent" name="continent">
        <option value="africa"><?php echo AFRICA; ?></option>
        <option value="europe"><?php echo EUROPE; ?></option>
        <option value="asia"><?php echo ASIA; ?></option>
        <option value="australia"><?php echo AUSTRALIA; ?></option>
        <option value="north-america"><?php echo NORTHAMERICA; ?></option>
        <option value="south-america" ><?php echo SOUTHAMERICA; ?></option>
    </select>
</fieldset>

<fieldset>
    <input type="checkbox" id="horse" name="horse" value="horsename">Horsename
</fieldset>

<fieldset>
    <input type="submit" name="travel" value="<?php echo TRAVEL; ?>" class="yellow" />
</fieldset>

顺便说一句，我是javascript / jquery的真正初学者，所以请解释我需要做什么以及为什么当你知道如何解决我的问题时：）

Answer 1

我没有对此进行过测试，但它可以帮助您理解逻辑。

var clickedEl = null;
$(document).on('mouseover','map#world area',function(e){
    if ( !clickedEl ) {
      var el = $(this);
      var elclass = el.attr('class');
      $('.world-'+elclass).show();
    }
    e.preventDefault();
}).on('mouseleave','map#world area',function(e){
    if ( !clickedEl ) {
      var el = $(this);
      var elclass = el.attr('class');
      $('.world-'+elclass).hide();
    }
    e.preventDefault();
}).on('click','map#world area',function(e){
    var el = $(this);
    if ( el == clickedEl ) {
      // it's the same el. hide it
      var elclass = el.attr('class');
      $('.world-'+elclass).hide();
      clickedEl = null; // nothing clicked anymore
    } else {
      // it's a different el
      // hide the old one
      var oldclass = clickedEl.attr('class');
      $('.world-'+oldclass).hide(); 
      // show the new one
      var elclass = el.attr('class');
      $('.world-'+elclass).show();
      $('select#continent').val(elclass).attr('selected','selected');
      clickedEl = el;  
    }  
    e.preventDefault();
});