单击列表项更改图像

Question

有些东西似乎无法让这个工作起来，需要一些帮助。 当您将鼠标悬停在单个li项目上时，此代码可以让您将鼠标悬停在更改图像的列表项上（例如，您将悬停在1月份，您会看到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>

Answer 1

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

Answer 2

看看这个小提琴 - 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有两个原因：

value不是jQuery对象属性。 val是你正在寻找的。 这是一种方法，而不是一种财产 - 这就是它前面的括号所代表的。
this指向除了元素之外的其他东西。 $(this)是你应该使用的。

单击列表项更改图像

问题描述

2 个解决方案

解决方案1
1 2012-07-22 03:27:55

解决方案2
1 2012-07-23 00:41:26

单击列表项更改图像

问题描述

2 个解决方案

解决方案1 1 2012-07-22 03:27:55

解决方案2 1 2012-07-23 00:41:26

解决方案1
1 2012-07-22 03:27:55

解决方案2
1 2012-07-23 00:41:26