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/

检测悬停并使用jquery更改图像

2 个答案: