3

何かが起きているため、これを機能させることができないようです。助けが必要です。このコードは、リスト アイテムにカーソルを合わせると、個々の 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>
4

2 に答える 2

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 文字列を確認できます。注: このイベント ハンドラーは、一部のブラウザーでのみ機能します。クロス ブラウザー イベント ハンドラーを作成する必要があります。

于 2012-07-22T03:27:55.980 に答える
1

このフィドルを見てください - 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次の 2 つの理由で機能しません。

  1. valuejQuery オブジェクトのプロパティではありません。valあなたが探しているものです。これはメソッドであり、プロパティではありません。その前にある括弧はそのためのものです。

  2. this要素以外のものを指します。$(this)あなたが使用すべきものです。

于 2012-07-23T00:41:26.290 に答える