Получить идентификатор из Event Trigger

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>

линия> вар ID = "# category1"/* - $ (OBJ) .attr ("ID"); */

есть, где моя проблема.

Я прокомментировал $ (obj) .attr ("id"); и добавил «# category1». Он работает так. Как получить идентификатор, чтобы я мог сконденсировать этот код в один блок? Кроме того, это все еще продолжается, поэтому, когда я выясню этот шаг, я хочу объединить mouseenter и mouseleave, чтобы использовать одно и то же значение i, и пока не знаю, как продолжить эту часть.

Answer 1

Чтобы получить идентификатор из класса, вызвавшего событие:

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

В следующий раз сделать JSFiddle, но вот один я сделал для вас, показывая, что он работает.

https://jsfiddle.net/3yn4e0ng/

Посмотрите в консоли для доказательства того, что он получает свой идентификатор.

---

Наконец, вы будете иметь проблемы с вашими высказываниями сравнения, подобные этим:

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

потому что JQuery не возвращает символ (#). Вы явно запрашиваете id, поэтому нет никакой причины для jQuery передать знак # в строку, указывая, что this - это id.

Рассмотрим вместо этого:

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

---

Примечание: Там нет причин для вас использовать == над ===, если ваш неуверен ли идентификатор, который выбирает JQuery имеет тип строки. Прочитайте этот удивительный пост: 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.