出现问题，似乎无法正常工作，需要一些帮助。此代码假设允许您将鼠标悬停在列表项上，当您将鼠标悬停在单个 li 项目上时更改图像，(例如，如果您将鼠标悬停在一月份，您会看到 Jan-Cal.png 图像)似乎不起作用
橘子脆饼
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
$("li").bind("mouseover",function(){
$("img").hide();
$("#img"+this.value).show();
console.log(this.value);
});
</script>
</head>
<body>
<div>
<img id="img0" src="../../WDC/Jan-Cal.png" />
<img id="img1" src="../../WDC/Feb-Cal.png" />
<img id="img2" src="../../WDC/March-Cal.png"/>
</div>
<ul>
<li value="0">January</li>
<li value="1">February</li>
<li value="2">March</li>
</ul>
</body>
</html>
最佳答案
尝试在 <ul> 上设置一个事件监听器然后获取被点击的元素。尝试像这样构建列表:
<ul id="months">
<li><img class="jan" src="../../WDC/Jan-Cal.png" /></li>
<li><img class="feb" src="../../WDC/Feb-Cal.png" /></li>
</ul>
然后设置一个onClick事件监听器:
function changeImage(evt){
// Get the image that was clicked.
var target = evt.target || evt.srcElement;
// Then get the src or get the class
var targetSrc = target.src;
var targetClass = target.getAttribute("class");
// Do more processing here...
// Then you can change the src of the image if need be.
}
var months = document.getElementById("months");
months.addEventListener("click", changeImage, true);
这样一来，无序列表中有多少元素并不重要。您可以检查类或 src 字符串。注意:此事件处理程序仅适用于某些浏览器。您必须创建一个跨浏览器事件处理程序。
关于javascript - 通过单击列表项更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11597286/