Javascript 为图像映射更改图像上的类

我知道在这个问题上有很多类似的问题被问到，但是我似乎无法使用任何解决方案。。 我把这张影像地图放在一个分区里：（别管坐标了，它们现在不正确）

但这似乎不起作用。。我肯定我有一个或更多的打字错误-我对这个js/jq东西很陌生：）

编辑：我刚刚意识到这可能意味着地图是用JS创建的。。所以我还需要知道把jq放在哪里（在地图下面或者在.js文件中我应该把它放在哪里？：）

我的JS：

function createSpinner() {
    var spinner = '<div class="spinner">';
    spinner += '<img src="filler.png" id="map" class="map" alt="Spinner"  Usemap="#spinnermap" border="0" />';

    spinner += '<map name="spinnermap">';
    spinner += '<area shape="poly" coords="5,25 51,60 110,25 51,2 8,25" href="#" onclick="createTable();" alt="Role">';
    spinner += '<area shape="poly" coords="5,25 8,66, 15,89 55,112 55,66 5,25"  href="#" onclick="createTable();" alt="System">';
    spinner += '<area shape="poly" coords="55,112 89,108 118,59 110,25 51,66 55,112" id="phasemap" href="#" onclick="createTable();" alt="Phase">';
    spinner += '</map>';
    spinner += '</div>';

    return spinner;
}

$('#phasemap').click( function() {
    $("#map").toggleClass('phasemap map');
    return false;
}); 

您必须使用

$（“#map”）

作为

选择器，而不是
$（此）。查找（“#map”）
，因为您的
img
在
相位映射之外
试试这个

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   // Use #map directly it is not children of #phasemap
});// don't use colon here

更新，您必须使用
返回false在
之后切换类别
以防止
区域
的默认工作

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   return false;// use return false or event.preventDefault() here
});

在中，您可以在
控制台中看到
图像类
正在
切换

从您编辑的问题中，您应该使用
jqueryversion>=1.9
这样的用法

您需要检查
createSpinner（）
是否工作。在
firebug
Hi！谢谢-我试过了，但不起作用。。（冒号只是这里的一个输入错误-但是要注意：o））我让js创建了areamap-也许我把toggleClass的东西放错地方了？（是的-也关闭了div-谢谢：o））你能看看我编辑的问题，看看我在JS中是否做了任何可能导致JQ无法工作的事情吗漂亮的please@Sally现在检查我的answercreateSpinner是否工作-唯一不工作的是toggleClass:）让我试试on（）…brbhi！这应该是一个onclick函数吗？但是。。。我已经有一次了。。我认为你不允许有多个？如果你想使用你已经拥有的函数，你可以添加多个，然后不需要调用另一个函数，但在内部部分，你只需要在顶部复制当前函数。。。你的问题会解决的。。祝你好运，萨利索。。函数中的函数？如何添加额外的onclick？？
var a=0;
function yourfunctionname(){
  if(a == 0){
   $("#map").attr('class','');
   $("#map").attr('class','phasemap map');
   a=1;
   return false;
  }
  else{
   $("#map").attr('class','');
   $("#map").attr('class','map');
   a=0;
   return false;
   }
 // your function code 
}

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   // Use #map directly it is not children of #phasemap
});// don't use colon here

$('#phasemap').click(function(){
   $("#map").toggleClass('phasemap map');
   return false;// use return false or event.preventDefault() here
});

$(document).on('click','#phasemap',function(){
   $("#map").toggleClass('phasemap map');
   return false;
}); 

var a=0;
function yourfunctionname(){
  if(a == 0){
   $("#map").attr('class','');
   $("#map").attr('class','phasemap map');
   a=1;
   return false;
  }
  else{
   $("#map").attr('class','');
   $("#map").attr('class','map');
   a=0;
   return false;
   }
 // your function code 
}