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

Question

我有元素，每个元素都有多个类，我想定义这些类中的每一个以在 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 做的事情：

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 和谁有@ 987654329@..

这里有问题：

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

如何定义具体的类，如何使数字可变？

Answer 1

不使用jQuery，你看这个例子

 .red.col1:hover ~ .col1{
    display:block !important;
   }
 .red.col2:hover ~ .col2{
      display:block !important;
  }
.red.col3:hover ~ .col3{
   display:block !important;
}
.red.col4:hover ~ .col4{
   display:block !important;
 }
 ![enter image description here][1]

http://jsfiddle.net/kisspa/cfeSy/

Answer 2

这是我的尝试：

$(".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的className，去掉"red"，修剪它，用空格分割得到其他类的数组，比如["col1", "row4"]，然后你就加入它可以制作".blue.col1, .blue.row4"这样的字符串，并使用这个字符串作为选择器来选择蓝色的div。

Answer 3

改用索引属性：

$(this).hover(
    function(){$(".blue:eq("+$(this).index()+")").show();},
    function(){$(".blue").hide();}
);

Working Demo