Question

我不确定我做错了什么。

我正在使用需要单击某个区域的图像映射，然后更改图像，文本和标题。我尽可能多地遵循了教程，但它没有用。

这是我目前使用的方法：

CSS：

#SafetyStopTitle {display:show}
#SafetyStopText {display:show;}
#SafetyStopImg {display:show;}
#PenStyleActivationTitle {display:none;}
#PenStyleActivationText {display:none;}
#PenStyleActivationImg {display:none;}
#ErgonomicGripText {display:none;}
#ErgonomicGripTitle {display:none;}
#ErgonomicGripImg {display:none;}
#BladeActivationTitle {display:none;}
#BladeActivationText {display:none;}
#BladeActivationImg {display:none;}
#TaperedTipTitle {display:none;}
#TaperedTipText {display:none;}
#TaperedTipImg {display:none;}
#SafetySutureGrooveTitle {display:none;}
#SafetySutureGrooveText {display:none;}
#SafetySutureGrooveImg {display:none;}
#BladeAvailabilityTitle {display:none;}
#BladeAvailabilityText {display:none;}
#BladeAvailabilityImg {display:none;}
#SafetyStopArea{}
#PenStyleActivationArea{}
#ErgonomicGripArea{}
#BladeActivationArea{}
#TaperedTipArea{}
#SafetySutureGrooveArea{}
#BladeAvailabilityArea{}

JQuery的

$("PenStyleActivationArea").click(function(){
    $("SafetyStopTitle").css(“display”, “none”);
    $("SafetyStopText").css(“display”, “none”);
    $("SafetyStopImg").css(“display”, “none”);
    $("PenStyleActivationTitle").css(“display”, “show”);
    $("PenStyleActivationText").css(“display”, “show”);
    $("PenStyleActivationImg").css(“display”, “show”);
    $("ErgonomicGripText").css(“display”, “none”);
    $("ErgonomicGripTitle").css(“display”, “none”);
    $("ErgonomicGripImg").css(“display”, “none”);
    $("BladeActivationTitle").css(“display”, “none”);
    $("BladeActivationText").css(“display”, “none”);
    $("BladeActivationImg").css(“display”, “none”);
    $("TaperedTipTitle").css(“display”, “none”);
    $("TaperedTipText").css(“display”, “none”);
    $("TaperedTipImg").css(“display”, “none”);
    $("SafetySutureGrooveTitle").css(“display”, “none”);
    $("SafetySutureGrooveText").css(“display”, “none”);
    $("SafetySutureGrooveImg").css(“display”, “none”);
    $("BladeAvailabilityTitle").css(“display”, “none”);
    $("BladeAvailabilityText").css(“display”, “none”);
    $("BladeAvailabilityImg").css(“display”, “none”);
});

地图：

  <map id="imgmap201310792213" name="imgmap201310792213"> 
    <area title="" alt="Safety Stop" coords="533,94,14" shape="circle" href="#/SafetyStop" /> 
    <area title="" alt="Pen Style Activation" coords="447,179,14" shape="circle" href="#/PenStyleActivation" /> 
    <area title="" alt="Broad Sturdy Ergonomic Grip" coords="386,219,14" shape="circle" href="#/ErgonomicGrip" /> 
    <area title="" alt="No Look, No Reposition, Passive or Active Blade Retraction" coords="232,312,15" shape="circle" href="#/BladeActivation" /> 
    <area title="" alt="Tapered For Better Blade Visibility" coords="170,401,16" shape="circle" href="#/TaperedTip" /> 
    <area title="" alt="Safety Suture Trimming Groove" coords="136,413,14" shape="circle" href="#/SafetySutureGroove" /> 
    <area title="" alt="Blade Availability" coords="107,431,15" shape="circle" href="#/BladeAvailability" /> 
    <area id="SafetyStopArea" coords="384,85,474,97" shape="rect" href="#/SafetyStop" /> 
    <area id="PenStyleActivationArea" coords="473,171,554,200" shape="rect" href="#/PenStyleActivation" /> 
    <area id="ErgonomicGripArea" coords="242,136,352,160" shape="rect" href="#/ErgonomicGrip" /> 
    <area id="BladeActivationArea" coords="12,235,187,279" shape="rect" href="#/BladeActivation" /> 
    <area id="BladeAvailabilityArea" coords="21,308,144,368" shape="rect" href="#/BladeAvailability" /> 
    <area id="TaperedTipArea"coords="240,387,371,415" shape="rect" href="#/TaperedTip" /> 
    <area id="SafetySutureGrooveArea" coords="141,442,261,468" shape="rect" href="/#/SafetySutureGroove" /> 
  </map>

这是小提琴使用：http://jsfiddle.net/timlcooley/sax66/2/

感谢您的帮助。我确信有更快的方法： - /

Answer 1

这里看 http://jsfiddle.net/sax66/4/。点击这两个区域，下面的img会发生变化。希望这是你的目的:)）

无论如何display:show不是CSS属性，您可能希望使用display:inline或我建议您学习的其他属性。

正如您可能也看到的那样，我使您的JS更简单，重复性更低。

重要！你在js中使用了类似

的东西
$('SafetyStopTitle')..

这是错误的。

<强>为什么吗 这样，jQuery将查找<SafetyStopTitle> TAG而不是id="SafetyStopTitle"，因此您必须在#之前使用SafetyStopTitle。

如果您想使用具有ID的元素，您必须使用：

$('#SafetyStopTitle')..

或者，如果你想使用带有CLASS的元素，你必须使用：

$('.SafetyStopTitle')..

Answer 2

嗯......

$("#SafetyStopTitle").css("display", "none");

等

show

中没有display:

#SafetyStopTitle {display:block /* or whatever */}

Answer 3

您的已更新 FIDDLE ，没有任何错误。

Jquery始终使用#查找ID，.查找类。因此，您应该在所有ID之前准备好#。例如

replace $('eleid') by $('#ele-id')

您必须添加两个div，并为其分配clicks个回调。

Jquery onclick与地图区域

3 个答案: