Question

我有一些带有容器的div。当单击其中一个div时，我会比较该div的ID和具有“CURRENT”类的ID，如果它们不相同，我会做一些事情。

我想添加另一个条件，检查类“红色”是否存在而不是“绿色”，如果是，则显示警告。我尝试了下面的代码，但我想我可能会检查错误，因为当我点击任何带有“主要”的div时我会收到警报......

<div id="main">
   <div id="1"><span class="red"></span>Label 1</div>
   <div id="2"><span class="red"></span>Label 2</div>
   <div id="3"><span class="green current"></span>Label 3</div>
   <div id="4"><span class="green"></span>Label 4</div>
</div>

$('#main div').live('click', function() {

   var ct = $('.current').attr('id');
   var cc = $(this).attr('id');

   // need to add conditional statement
   // if ($(this).find('.red')) {
   //    alert("Has red class");

   if (ct != cc) {
      // do something
   }

});

Answer 1

尝试

if ($(this).hasClass('red')) {
   // do something
}

编辑：抱歉，这假设，点击事件来自跨度本身。

if ($('span', this).hasClass('red')) {
   // do something
}

应该有用......

第二次编辑：你应该关闭你的div ...然后： http://jsfiddle.net/E9948/

Answer 2

检查元素是否具有类的方法是使用.hasClass()

if ($('span', this).hasClass('red')){
    alert('has red class');
}

当你.find('.red')获得$(this)的后代red时，你正在做什么。它不会返回布尔值，例如.hasClass（）。

此外，您的div id以数字开头。这不是正确的方法。他们应该以一封信开头。最好关闭div标签。： - ）

这是jsbin

Answer 3

替代方案（工作样本http://jsbin.com/oqopaw/1/edit）：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    #main span{
      cursor:pointer;
    }
    .red{
      background-color:red;
    }
    .green{
      background-color:green;
    }
  </style>
</head>
<body>
<div id="main">
   <div id="1"><span class="red">Label 1</span></div>
   <div id="2"><span class="red">Label 2</span></div>
   <div id="3"><span class="green current">Label 3</span></div>
   <div id="4"><span class="green">Label 4</span></div>
</div>
<script>
$('#main span').click(function() {
  if($(this).attr('class').indexOf('current') >= 0) 
  {
    if($(this).attr('class').indexOf('green') >= 0) alert('current green!');
  }
});  
</script>
</body>
</html>

如果div具有不同的类，则单击更改操作

3 个答案: