檢測懸停並使用jquery更改圖像

Question

是否有更好的方法來執行以下操作？我有一個旋轉木馬，通過五個幻燈片，我有一些按鈕上方。如果按鈕懸停，我將切換到傳送帶中的相應幻燈片。它的工作原理，但我想知道，這是在jQuery的正確方法？

$('#cat_0').mouseover(function() { 
     $('#carousel > li').removeClass('selected'); 
     $('#slide_0').addClass('selected'); 
    }); 

    $('#cat_1').mouseover(function() { 
     $('#carousel > li').removeClass('selected'); 
     $('#slide_1').addClass('selected'); 
    }); 

    $('#cat_2').mouseover(function() { 
     $('#carousel > li').removeClass('selected'); 
     $('#slide_2').addClass('selected'); 
    }); 

    $('#cat_3').mouseover(function() { 
     $('#carousel > li').removeClass('selected'); 
     $('#slide_3').addClass('selected'); 
    }); 

    $('#cat_4').mouseover(function() { 
     $('#carousel > li').removeClass('selected'); 
     $('#slide_4').addClass('selected'); 
    }); 

感謝

Answer 1

嘗試，

$('[id^="cat_"]').mouseover(function() { 
    $('#carousel > li').removeClass('selected'); 
    $('#slide_' + (this.id.substring(4))).addClass('selected'); 
}); 

Answer 2

，如下圖所示你可以這樣做： -

jQuery的： -

$('.btn').mouseover(function() { 
    alert("sfg"); 
     $('#carousel > li').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

HTML： -

<input type="text" id="state" value="test" /> 
<input type="button" value="button1" class="btn"/> 
<input type="button" value="button2" class="btn"/> 
<input type="button" value="button3" class="btn" /> 
<input type="button" value="button4" class="btn"/> 

演示： -

http://jsfiddle.net/avmCX/42/