Question

我有两个动态应用于鼠标事件元素的类，比如它们是：

classOne和classTwo

如何检查接收鼠标事件的元素是否具有除这两个之外的类？

HTML示例：

<div>
    <span class="classOne classTwo">Element</span>
    <span class="classOne">Element</span>
    <span class="classTwo">Element</span>
    <span class="classOne classTwo otherClass">Element</span>
    <span class="classOne otherClass">Element</span>
    <span class="classTwo otherClass">Element</span>
</div>

Answer 1

这个怎么样：

 $('body').on('mouseover', 'span', function(){
    var spanclasses = $(this).attr('class').replace('classOne', '').replace('classTwo', '').trim();
    if(spanclasses.length)
    {
        alert('there is another class');
    }else{  
        alert('there is no other classes');
    }
 });

<强>更新

收到一些反馈后，这是首选方式：

演示：https://jsfiddle.net/a8vkkqox/

 $('body').on('mouseover', 'span', function(){
      var span = $(this).clone().removeClass('classOne').removeClass('classTwo');
      if(span.attr('class').length)
      {
          alert('there is another class');
      }else{  
          alert('there is no other classes');
      }
 });

Answer 2

我想你是在追求这个：

var classes = ["classOne", "classTwo"];
$('div span').on('click', function (e) {
    var thisArray = this.classList;
    console.log(thisArray);
    $.each(thisArray, function (i, klas) {
        if ($.inArray(klas, classes) == -1) {
            alert('this element has the extra class.' + klas);
        }
    });
});

Fiddle.

Answer 3

这个想法很简单：抓取class属性，提取类名并将它们与白名单进行比较：

$(function() {
  var whitelist = ["classOne", "classTwo"];
  $("span").each(function() {
    var $this = $(this);
    var classNames = $this.attr("class").trim().split(/\s+/);
    var classOther = $.grep(classNames, function(className) {
      return $.inArray(className, whitelist) === -1;
    });
    if (classOther.length) {
      $this.css("border", "thick solid red");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <span class="classOne classTwo">Element</span>
  <span class="classOne">Element</span>
  <span class="classTwo">Element</span>
  <span class="classOne classTwo otherClass">Element</span>
  <span class="classOne otherClass">Element</span>
  <span class="classTwo otherClass">Element</span>
  <span class="classOne classTwo classOneclassTwo">Element</span>
  <span class="classOne classOne">Element</span>
</div>

Answer 4

包含classOne或classTwo以外的类的元素将变为红色：

$('span').each(function() {
  var that = $(this);
  var classArr = that.attr('class').split(' ');
  for (i=0;i<classArr.length;i++) {
    if (classArr[i].indexOf('classOne') == -1 && classArr[i].indexOf('classTwo') == -1) {
      that.addClass('otherClass');
    }
  }
});

.otherClass { color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="classOne classTwo">Element</span>
<span class="classOne">Element</span>
<span class="classTwo">Element</span>
<span class="classOne classTwo otherClass">Element</span>
</div>

Answer 5

$(document).on('mouseover', '.classOne.classTwo', function(){
    $(this).each(function(){
      var cls=$(this).attr("class").split(" ");
      if(cls.length>2) {
         alert(cls.length);
      }
    });
});

DEMO

如果此类型有多个元素，您可以使用.each()

Answer 6

这是解决方案。鼠标悬停时会触发脚本。

./jmeterrun2.sh testversion noserver  shaun shaun

<强> HTML

 <script>
 $(document).ready(function () {
  $("span").hover(function () {
   if ($(this).hasClass('otherClass')) {
     // do something 
     alert("otherClass");
   }
  });
});
</script>

不要忘记包含js库。

Answer 7

$('div > span').click(function(){
    var foo = $(this).attr('class');
    foo = foo.split(' ');
    var classOne = foo.indexOf("classOne");
    var classTwo = foo.indexOf("classTwo");
    if(classOne != -1 && classTwo != -1){
        alert('Both classes found');
    }
    else if(classOne != -1 && classTwo == -1){
        alert('classOne found');
    }
    else if(classOne == -1 && classTwo != -1){
        alert('classTwo found');
    }
    else{
        alert('none of classe found');
    }
});

<强> Demo
的更新

$('div > span').click(function(){ var foo = $(this).attr('class'); foo = foo.split(' '); var otherClass= foo.indexOf("otherClass"); if(otherClass!= -1){ alert('has otherClass'); } else{ alert('has no otherClass'); } });

<强> updated demo

如何检查元素是否具有指定类以外的类？

7 个答案:

Fiddle.