Question

我正在努力使一段代码可以大规模重复使用而无需复制/粘贴并将特定的“类”更改350次。

这是非功能性代码，可以提供我想要做的事情：

$(function(){ 
    var ClassName = $(this).attr('class');
    $(ClassName).each.hover(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}
$(function(){ 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}

这是工作代码，但它仅适用于SPECIFIC＆amp; GIVEN课程：

$(function(){ 
    $('.specific-class').hover(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}
$(function(){ 
    $('.specific-class').mouseout(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}

如果可能的话 - 我想仅通过头等舱匹配，或者能够从匹配检查中排除一个类。一半的元素也会有“key”类，另一半会有“map”。这个想法是当你将鼠标悬停在地图上的一个键或一个点上时 - 另一个也会“点亮”它以便于查找。

因此，给定四个div，一对将是“div.spot1”与“div.spot1.key”，另一对将是“div.spot2”与“div.spot2.key”。需要排除“.key”，否则Legend上的两个点都将应用悬停效果。对于任何给定的“现货＃”，我只想匹配“.spot1”或“.spot2”

如果需要进一步澄清，请告诉我。现在是凌晨2点，我整夜都试图解决这个问题。

Answer 1

使用$(ClassName)更改$("."+ClassName);

 $(function(){ 
     var ClassName = $(this).attr('class');
      $("."+ClassName).each.hover(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }
       $(function(){ 
      $("."+ClassName).mouseout(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }

Answer 2

正如您所描述的那样："it only works on a SPECIFIC & GIVEN class"

这不是你真正的问题，你没有对选择元素使用jquery class selector：

尝试：将$(ClassName)替换为$("." + ClassName)

说明：

您的工作代码：

$('.specific-class').hover(toggle); 
// ^
// Here you use class selector, so it's working

代码不起作用：

var ClassName = $(this).attr('class');
// "ClassName" It's only contains the class name for example: "specific-class"

 $( ClassName).each.hover(toggle); 
// ^
// Here class selector is missing

Answer 3

使用此片段，您可以选择第一个类，因此如果您在问题中描述了多个类，则它将仅返回元素中的第一个类（即：spot1）

var ClassName = $(this).attr("class").split(" ")[0];

Answer 4

使用

$("." + ClassName)

而不是

$(ClassName)

并且您不必初始化两次toogle函数。

这是更正后的代码：

$(function(){ 
    var ClassName = $(this).attr('class');//i don't know which object you are pointing here
    alert(ClassName);//this will give you undefined 
    $(ClassName).each.hover(toggle); 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}

JQuery - 选择此类的所有项目

4 个答案: