Get id From Event Trigger

Question

I have tried everything that I have found on Stack Overflow, but I cannot get this to work. Here is my code.

$(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>

line > var id = "#category1" /*-- $(obj).attr("id"); */

is where my problem is.

I have commented out $(obj).attr("id"); and added "#category1". It works like this. How do I get the id so I can condense this code into one block? Also, this is still a work in progress so once I figure out this step I want to combine mouseenter and mouseleave to use the same value of i, and I don't know how to proceed with that part yet.

Use `this` or `$(this)` inside event handler. **Answer:** Use `this.id` or `$(this).attr('id')` — Tushar, Apr 21 '16 at 15:40
Yes, I have tried that and it does not work. Is it the way that i implement it? Here is my line of code. var id = $(this).attr("id"); This is my first JavaScript program so maybe I am not understanding something fundamental about the structure of my code. — newb, Apr 21 '16 at 15:44
@Matt Are you sure you "tried that" correctly? Look at the fiddle in my answer; I got it working. — 8protons, Apr 21 '16 at 15:48
@Matt Ah, I found what was probably hanging you up. Look at my updated answer. — 8protons, Apr 21 '16 at 15:55
@Matt: You may want to consider using ```:hover``` in your CSS to handle what you are doing as class changes here. — Benjamin Downs, Apr 21 '16 at 16:09
@Benjamin Downs Originally I had it that way, but I needed to keep the background of the category link white while I hovered the submenu. I could not change the CSS of a sibling that was above the submenu. That was the point of this project where I started learning JavaScript and JQuery. — newb, Apr 21 '16 at 16:23

score 1 · Accepted Answer · edited May 23 '17 at 10:28

To get the id from the class that triggered the event:

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

Next time make a JSFiddle but here's one I made for you, showing that it works.

https://jsfiddle.net/3yn4e0ng/

Look in the console for proof that it is getting your id.

Lastly, you're going to have issues with your comparison statements like these:

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

because jQuery doesn't return the (#) symbol. You're explicitely asking for the id so there's no reason for jQuery to pass back a # sign into the string, indicating that thisis an id.

Consider this instead:

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

Note: There's no reason for you to use == over === unless your insecure about whether the id that jQuery fetches is of type string. Read this amazing post: Which equals operator (== vs ===) should be used in JavaScript comparisons?

It was the (#) causing the problem. Thank you! – newb Apr 21 '16 at 15:59 — newb, Apr 21 '16 at 15:59
@Matt Glad we figured it out! Take care. – 8protons Apr 21 '16 at 16:00 — 8protons, Apr 21 '16 at 16:00

web hobbit · Answer 2 · 2016-04-21T15:54:35.567

0

you can do it like this:

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

this is a working fiddle.

edited Apr 21 '16 at 15:54

answered Apr 21 '16 at 15:45

web hobbit

501
4
17

Get id From Event Trigger

2 Answers2