了解函数中鼠标输入链接的类

Know the class of a mouseenter link in a function

本文关键字:链接 输入 鼠标 函数 了解      更新时间:2023-09-26

我对jquery孩子有一点问题。

我有这个代码:

<li><a href="#" class="gocinema">cinema</a></li>
<li><a href="#" class="gomusic">music</a></li>
<li><a href="#" class="gogame">game</a></li>

我尝试设置一个功能来更改悬停时链接的颜色。(我不能简单地用css做到这一点,因为它适用于菜单上的复杂网页设计。

我尝试做的是做一个函数,他说:

我是穆森特的链接的类别是什么?

如果类是那样的,那就这样做。如果类是那样的,那就这样做。

我读了很多关于jquery儿童的文章,但我不知道如何在函数中这么说。

对不起,如果不是很清楚:/谢谢

托马斯

$(document).on('mouseenter mouseleave', 'a', function () {
    if ( this.className === 'gocinema' ) {
        // do this
    }
    if ( this.className === 'gomusic' ) {
        // do that
    }
});

更新

如果您的链接上有多个类,您可以尝试$.fn.hasClass

$(document).on('mouseenter mouseleave', 'a', function () {
    var $this = $(this);
    if ( $this.hasClass('gocinema') ) {
        // do this
    }
    if ( $this.hasClass('gomusic') ) {
        // do that
    }
});

试试这个:

$('a').mouseenter(function(){
   alert($(this).attr('class'));
   var classes = $(this).attr('class');
   if(classes == 'whatyouwant'){
      //do something
   }
});

演示

如果是它的菜单,这应该是使用 jquery 的正确方法。

.HTML

<ul class="mymenu">
  <li><a href="#" class="gocinema">cinema</a></li>
  <li><a href="#" class="gomusic">music</a></li>
  <li><a href="#" class="gogame">game</a></li>
</ul>

爪哇语

$('.mymenu a').hover(function(){
    $(this).addClass('hover-style');
}, function () {
      $(this).removeClass('hover-style');
});

.CSS

.hover-style{
    background:red;
    color:white
}

在此处查看现场演示。 http://jsfiddle.net/ruchit47/HGbrQ/


此外如果要为每个菜单项提供不同的样式。您可以通过这种方式创建样式。

.hover-style.gocinema{ background:red; } 
.hover-style.gomusic{ background:blue; } 
.hover-style.gogame{ background:green; }