0

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

我想添加另一个条件，检查类“红色”是否存在而不是“绿色”，如果是，则显示警报。我尝试了下面的代码，但我想我可能检查错了，因为当我单击带有“main”的任何 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
   }

});
4

3 回答 3

3

尝试

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

编辑：对不起，这是假设点击事件来自跨度本身。

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

应该管用...

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

于 2012-11-20T13:25:39.600 回答
1

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

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

当你有的时候你正在做的.find('.red')是让后代$(this)有一个 class red。它不会像 .hasClass() 那样返回布尔值。

此外，您div id的 s 以数字开头。那不是正确的方法。他们应该以一封信开头。关闭div标签是个好主意。:-)

这是一个jsbin

于 2012-11-20T13:27:28.293 回答
0

替代方案（工作示例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>
于 2012-11-20T13:41:21.777 回答