从事件触发器获取ID

Question

我已经尝试了我在Stack Overflow上找到的所有内容，但是我无法使其工作。这是我的代码。

$(document).ready(function(){ 
 
    
 
    $(".category, .submenu").mouseenter(function(){ 
 
    
 
    var i = 0; 
 
    var id = "#category1" /*-- $(obj).attr("id"); */ 
 
    if (id == "#category1") {i = 1}; 
 
    
 
    $("#submenu" + i).toggleClass("submenuHover"); 
 
    $("#category" + i).toggleClass("categoryHover"); 
 
    }); 
 
    
 
    $("#category1, #submenu1").mouseleave(function(){ 
 
    $("#submenu1").toggleClass("submenuHover") 
 
    $("#category1").toggleClass("categoryHover"); 
 
    }); 
 
    
 
    $("#category2, #submenu2").mouseenter(function(){ 
 
    $("#submenu2").toggleClass("submenuHover"); 
 
    $("#category2").toggleClass("categoryHover"); 
 
    }); 
 
    
 
    $("#category2, #submenu2").mouseleave(function(){ 
 
    $("#submenu2").toggleClass("submenuHover"); 
 
    $("#category2").toggleClass("categoryHover"); 
 
    }); 
 
    
 
});

<a id="category1" class="category" href="#">Category 1</a> 
 
<div id="submenu1" class="submenu"> 
 

 
    <div> 
 
    <b>Column 1</b> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div> 
 
    <b>Column 2</b> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
</div> 
 

 
<a id="category2" class="category" href="#">Category 2</a> 
 
<div id="submenu2" class="submenu">Submenu #2 
 
    <div> 
 
    <b>Column 1</b> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div> 
 
    <b>Column 2</b> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
     <li><a href="#">Item 5</a></li> 
 
    </ul> 
 
    
 
    </div> 
 

 
</div>

线> VAR ID = “＃类别1”/ * - $（OBJ）.attr（ “ID”）; */

是我的问题所在。

我已评论$（obj）.attr（“id”）;并添加了“＃category1”。 它的工作原理是这样的。 我如何获得id，以便将此代码压缩成一个区块？ 此外，这仍然是一项工作，所以一旦我找出这一步，我想结合mouseenter和mouseleave使用相同的值我，我不知道如何继续那部分。

Answer 1

从触发事件的类获得ID：

$(".category, .submenu").mouseenter(function(){ 
    var id = $(this).attr('id'); 
    ... 
} 

下一次做出的jsfiddle但这里有一个我为你做的，可见它的工作原理。

https://jsfiddle.net/3yn4e0ng/

看在控制台证明它是让你的ID。

---

最后，你将有问题你比较语句像这样：

if (id == "#category1") {i = 1}; 

因为jQuery不返回（#）符号。您明确要求id，所以没有理由让jQuery将#符号传回字符串，表明this是id。

考虑这个：

if (id == "category1") {i = 1}; 

---

注：有你超过===使用==，除非你没有安全感有关jQuery的获取ID是否为字符串类型的任何理由。阅读这个惊人的帖子：Which equals operator (== vs ===) should be used in JavaScript comparisons?

Answer 2

，你可以做这样的：

var id = $(this).hasClass("category") ? $(this).attr("id") : $(this).closest(".submenu").prev("a").attr("id"); 

• 这是一个工作fiddle。