Question

我正在寻找一种基于在div上悬停来获取类名的方法。这两个div都具有相同的id但略有不同的类名。看看下面的例子：

<div id="1-someid" class="1-example-class border cz">
...more element goes here....
</div>

和

<div id="2-someid" class="2-example-class border cz">
...more element goes here....
</div>

更新：根据以下发布的专家意见，我的ID名称是唯一的。 :)感谢所有的帮助。

现在我想要的是，当用户使用1-example-class将鼠标悬停在div上时，它会返回类名1-example-class。当人们使用2-example-class将鼠标悬停在div上时，它会返回2-example-class名称。

这样我就可以在该名称上使用parseInt()来获取数字，1,2,3等等。

另请注意，为1-example-class或2-example-class编写静态脚本无济于事，因为还有更多像这样的div，附带3,4,5等等。

有人可以帮忙吗？我尝试了以下但是它没有帮助。

$('#someid').hover(function() {
        var class_names = $(this).attr('class');

        var class_name = class_names.split( ' ' ); 

        var c = parseInt( class_name[0] );

        console.log( c );
});

如果有人可以提供帮助，那将非常有帮助。

Answer 1

根据您当前的配置，这是一种方法：

$('div').hover(function() {
        // grab class attribute, split on space character (like you're doing already)
        var class_names = $(this).attr('class').split( ' ' );

        // loop through each class
        $.each( class_names, function( k,v ){
            // see if this 1 class matches your example
            if ( v.indexOf("example-class") > 0 ){
                // if it does, remove text part of class name
                var this_num = v.replace( '-example-class', '' );
                // output numeric value only to console
                console.log( parseInt( this_num ) );
            }
        });

});

此方法不期望相同的类配置（意味着类属性中的类可以按任何顺序排列，只要它包含示例字符串）。在您的问题中，代码期望列出的第一个类是示例字符串类。

请参阅此示例：https://jsfiddle.net/31505tw1/

在示例中，我已将重复的ID替换为类。正如其他人所指出的，HTML规范要求每个ID都是唯一的。

Answer 2

属性选择器和Regex是要走的路：

$("[class*=example-class]").hover(function() {
    var c = this.className.match(/(\d+)-example-class/)[1];
    console.log(c);
});

$("[class*=example-class]")匹配其班级的所有元素属性包括'example-class'字符串。
this.className.match(/(\d+)-example-class/)[1]给出相关内容号。

Answer 3

有几种方法可以做到这一点 - 但其他用户是正确的，你的问题是多次使用相同的ID，这是你已经拥有的代码不起作用的唯一原因。如果您使用其他共享类之一作为选择器，则原始脚本将起作用：

+-------+-------+-------+
| cash  | 500.0 | 900.0 |
+-------+-------+-------+

Answer 4

首先，您应该在div上使用唯一ID：https://stackoverflow.com/a/9454716/984323

不仅HTML有效，而且你的jQuery脚本也无法区分这两者。然后你可以定位每个div，其余代码似乎可以工作。

<div id="someid" class="1-example-class border cz">
...more element goes here....
</div>

<div id="someid2" class="2-example-class border cz">
...more element goes here....
</div>

https://jsfiddle.net/05r8f013/1

Answer 5

也许你可以举例如：

$('div').hover(function(){
if ( $(this).attr('class') == 'some class' ) {
//Do something 
} else {
//Do something else...
}

Answer 6

ID必须在整个HTML中都是唯一的。由于您使用classname来获取数据，因此可以将名称字段添加到div：

<div name="someid" class="1-example-class border cz">
...more element goes here....
</div>

<div name="someid" class="2-example-class border cz">
...more element goes here....
</div>

 $('[name="someid"]').hover(function() {
    var class_names = $(this).attr('class');
    var class_name = class_names.split( ' ' ); 
    var c = parseInt( class_name[0] );
    console.log( c );
 });

Answer 7

您可以对类名称模式匹配的悬停项目执行正则表达式：

<div name="someid" class="1-example-class border cz">
...more element goes here....
</div>



<script>

$('#someid').hover(function() {
   var className = this.className.match(/(\d)-example-class/);

   if(className){
      console.log(className[0]) // 1-example-classname
      console.log(className[1]) // 1
   }
});

如何在jquery

7 个答案: