单击列表项更改图像

Change Image by clicking on list Item

本文关键字：图像 列表 单击      更新时间：2023-12-18

有些问题似乎无法解决，需要一些帮助。假设此代码允许您将鼠标悬停在列表项上，当您将鼠标悬浮在单个li项上时，更改图像（例如，如果您将鼠标停留在一月，您将看到Jan-Cal.png图像）似乎不起作用

Orange Crunch

<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字符串。注意：此事件处理程序仅适用于某些浏览器。您必须制作一个跨浏览器的事件处理程序。

看看这个小提琴-http://jsfiddle.net/joplomacedo/wzQPq/

javascript/jquery:

var images = $('#images').find('img');
//hide images at the beginning
images.not(images.first()).hide();
$("#legends").on("mouseover", 'li', function () {
    var $this = $(this),
        $this_val = $this.val();
    $("img").hide();
    $("#img"+$this_val).show();
});​

html:

<div id="images">
<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 id="legends">
<li value="0">January</li>
<li value="1">February</li>
<li value="2">March</li>
 </ul>

问题是你是this.value而不是$(this).val()。

this.value不能工作有两个原因：

  1. value不是jQuery对象属性。val正是您想要的。这是一个方法，而不是一个属性——这就是它前面括号的作用。

  2. CCD_ 7指向元素之外的其他东西。$(this)是您应该使用的。

相关文章：