javascript - jQuery-如何为元素定义特定的变量类具有多个类

我有元素，每个元素都有多个类，我想定义在jquery中使用的每个类。。
解释。。这是代码：http://jsfiddle.net/wUWYs/2/
HTML格式：

<div class="red row4 col1"></div>
<div class="red row3 col2"></div>
<div class="red row2 col3"></div>
<div class="red row1 col4"></div>

<div class="blue row1 col1"></div>
<div class="blue row2 col2"></div>
<div class="blue row3 col3"></div>
<div class="blue row4 col4"></div>

这就是我试图用jquery做的：
查询：

$(".red").each(function(){
    var colNumber = $(this).attr("class");
    $(this).hover(
        function(){$(".blue."+colNumber).show();},
        function(){$(".blue").hide();}
    );
});

当鼠标悬停red element时，我想要的主要问题是谁有col1和row4类，然后显示两个blue elements类，谁有col1和谁有row4类。。
这里的问题是：

var colNumber = $(this).attr("class");

如何定义特定的类，以及如何使数字变量？

最佳答案

这是我的尝试：

$(".blue").hide();
var getClass = function(target){
  return $.map(target.className
                     .split(' '), function(e){
                       return e == 'red' ? null : '.blue.' + e;
                    }).join(', ');
};
$(".red").hover(function(e){
    $(getClass(e.target)).show();
 }, function(e){
    $(getClass(e.target)).hide();
});

Demo.
这个想法很简单，您只需要获取悬停的红色div的类名，删除"red"，修剪它，按空格分割以获取其他类的数组，例如["col1", "row4"]，然后您只需将其连接以生成字符串，例如".blue.col1, .blue.row4"，并使用此字符串作为选择器来选择蓝色div。