1

画像付きのdivがあり、そのすぐ下にメニューがあります。必要なのは、メニュー項目の1つにカーソルを合わせるたびに画像が変化することです。現在、合計5つの画像があります。ロゴにカーソルを合わせるたびに、その画像を最後まで次の画像に変更してから、画像番号を付けてサイクルをやり直します。1.1。

私は初めてswitchステートメントを使用していますが、それを機能させることができないため、おそらく間違っています。現在、画像1から2に変更できますが、停止します。

私が持っているコードは次のとおりです。

HTML

<div>
    <img id="img" src="http://placekitten.com/200/300" />
</div>
<nav>
    <ul>
        <li id="logo"><a href="">logo</a></li>
        <li><a href="">menu item</a></li>
        <li><a href="">menu item</a></li>
    </ul>
</nav>

jQuery

$('#logo').bind("mouseover", function(){
    var currentimage  = $('#img').attr('src',"http://placekitten.com/202/302");

    switch (currentimage) {
        case 0:
            $('#img').attr('src',"http://placekitten.com/205/300");
            break;
        case 1:
            $('#img').attr('src',"http://placekitten.com/200/305");
            break;
        case 2:
            $('#img').attr('src',"http://placekitten.com/200/300");
            break;
    }
})

これがフィドルです。誰かが見て、私が間違っているところを指摘していただければ幸いです:)

4

3 に答える 3

2

これはどのように機能するかではありませんswitch。switchif-elseチェーンのようなものです：

if ( currentimage == 0 )
    $('#img').attr('src',"http://placekitten.com/205/300");
else if ( currentimage == 1 )
    $('#img').attr('src',"http://placekitten.com/200/305");
else if ( currentimage == 2 )
    $('#img').attr('src',"http://placekitten.com/200/300");

ただし、currentimageではなく0、1または2、jQueryオブジェクトです。電話をかけるとき：

var currentimage  = $('#img').attr('src',"http://placekitten.com/202/302");

画像のsrc属性をに設定してから"http://placekitten.com/202/302"、画像オブジェクト自体を返します。したがって、switchステートメントは何も入力しませんcase。

したがって、別の解決策を見つける必要があります。1つの方法は、count変数を作成してそれぞれにインクリメントし、代わりにその上でをmouseover使用することです。swtich

var count = 0;
...
count = (count+1)%3;
switch (count) {

jsFiddleでのデモ。最善の解決策ではありませんが、始めるのに役立つかもしれません。

于 2013-03-01T00:57:54.010 に答える
1

スイッチケースの膨大なリストになる可能性のあるものを作成する代わりに、この方法を試してください
デモhttp://jsfiddle.net/xwwzW/9/

var images=['http://placekitten.com/202/302',
            'http://placekitten.com/205/300',
            'http://placekitten.com/200/305',
            'http://placekitten.com/200/300'];
var currentimage=0;

$('#logo').on("mouseover", function(){
    //console.log(currentimage);
    $('#img').attr('src', images[currentimage]);
    currentimage++;
    if (currentimage>images.length-1) currentimage=0;
});
于 2013-03-01T00:58:06.987 に答える
1

次のようなものを試してください。

var imgs = [
  'http://placekitten.com/205/300',
  'http://placekitten.com/200/305',
  'http://placekitten.com/200/300'
];

var $img = $('#img');
$('#logo').on('mouseover', function() {
  var current = imgs.indexOf($img.attr('src'));
  $img.attr('src', imgs[++current] || imgs[0]);
});

デモ： http： //jsfiddle.net/xwwzW/14/

于 2013-03-01T00:58:39.530 に答える