從事件觸發器獲取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。