jQuery 初学者悬停，带有 if 语句答案

【问题标题】：jQuery Beginner Hovers, with if statementsjQuery 初学者悬停，带有 if 语句
【发布时间】：2014-01-19 10:34:57
【问题描述】：

现在，我有这段代码可以工作：

$( "a.tw" ).hover(function() {
$( "a.st" ).css("background-image", "url(stw.png)");  
});

$( "a.tu" ).hover(function() {
$( "a.st" ).css("background-image", "url(stu.png)");  
});

$( "a.in" ).hover(function() {
$( "a.st" ).css("background-image", "url(sin.png)");  
});

但是，我真正想做的是对所有这些都有“if”语句。如果我将鼠标悬停在上述类之一上，我希望 BG 会发生变化。

有人能指点我正确的方向吗？

【问题讨论】：

当然，如果有更优雅的方式来使用 if 语句对其进行编码，我很乐意学习。尤其是因为 $( "a.st" ).css("background-image" 总是有针对性的。
你不使用css是因为.st元素不在hovered元素内吗？根据元素的视觉位置，您可能仍然可以使用 css 执行此操作。
@Joonas 它看起来像这样：<a href="#" class="tw"></a> <a href="#" class="tu"></a> <a href="#" class="in"></a> <a href="#" class="to"></a> <a href="#" class="cu"></a> <a href="#" class="st"></a>
我应该预见到这一点。出于某种原因，我认为您也有多个 .st 元素。 ||您可能可以这样做：jsfiddle.net/KN4rE 这是一种相对灵活的方式。

标签： jquery if-statement hover mouseevent mouseover

【解决方案1】：

如果可能的话，更简单的方法是把你的背景变成一个类：

$('a.tw').hover(function() {
   $('a.st').toggleClass('background-stw');  
});

CSS

.background-stw
{
   background-image : url('stw.png');
}

【讨论】：

【解决方案2】：

试试

$("a.tw,a.tu,a.in").hover(function () {
    var $a = $(this)
    $("a.st").css("background-image", function () {
        if ($a.hasClass('tw')) {
            return "url(stw.png)";
        }
        if ($a.hasClass('tu')) {
            return "url(stu.png)";
        }
        if ($a.hasClass('in')) {
            return "url(sin.png)";
        }
    });
});

【讨论】：

这很棒。您可以使用else if 语句代替最后两个if 语句。
这是一个扩展，我上面有这个代码：code@ 987654325@ 我有一个切换功能，可以切换 w.css 和 t.css 之间的链接，有没有办法在执行该功能之前检查它是 t.css 还是 w.css？

【解决方案3】：

你也可以使用 live() 函数，所以它适用于 DOM

$('a').live('hover', function() {
    if($(this).hasClass('tw'))
    {
        // Applay bg
    }
});

【讨论】：