我设置了 javascript 鼠标单击事件来检测用户单击图像上的位置,根据单击图像的哪个区域来更新 div 标记中的文本。问题是 div 标签中的文本发生了短暂的变化,然后又恢复为 HTML 中的原始文本。
Javascript:
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#area1").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area1");
});
$("#area2").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area2");
});
$("#area3").click(function (b) {
$("#results").html("Text replaced by JS Mouse Click for area3");
});
});
</script>
HTML:
<img id="pic" usemap="#imagemap1" src="image.jpg" />
<map id="imgmap" name="imagemap1">
<area id="area1" shape="circle" alt="" title="" coords="51,46,25" href="" target="" />
<area id="area2" shape="circle" alt="" title="" coords="71,131,25" href="" target="" />
<area id="area3" shape="circle" alt="" title="" coords="141,72,25" href="" target="" />
</map>
<div id="results">
Original HTML Text
</div>
DIV 标记中的文本将会更改,但只会更改一秒钟,然后返回“原始 HTML 文本”。如何永久更改 DIV 标记中的文本,直到用户单击图像映射的其他部分?
最佳答案
听起来好像您的点击触发了默认操作,刷新页面。尝试阻止这种情况。另外,我将您的 3 个点击处理程序缩短为一个。
$("[id^='area']").click(function (e) {
e.preventDefault();
$("#results").html("Text replaced by JS Mouse Click for " + $(this).attr("id"));
});
关于javascript - 使用 jQuery 鼠标单击事件永久更改 DIV 标记中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16817583/