CODEWITHSUNDEEP
javascriptjquery
newb
newb

Reputation: 115

Get id From Event Trigger

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.

Upvotes: 1

Views: 90

Answers (2)

8protons
8protons

Reputation: 3959

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?

Upvotes: 1

web hobbit
web hobbit

Reputation: 501

you can do it like this:

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

Upvotes: 0

Related Questions