Question

我有元素，每个元素都有多个类，我想定义每个类在jquery中使用..

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，拥有row4 ..

问题在这里：

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

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

Answer 1

改为使用索引属性：

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

<强> Working Demo

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

不使用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/

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

3 个答案:

Demo.