Question

我已经尝试过在Stack Overflow上找到的所有东西，但是我无法让它工作。这是我的代码。

＆＃13;

$(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");
  });
    
});

＆＃13;

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

＆＃13;

line＆gt; var id =＆＃34; #category1＆＃34; / * - $（obj）.attr（＆＃34; id＆＃34;）; * /

是我的问题所在。

我已经注释掉了$（obj）.attr（＆＃34; id＆＃34;）;并添加＆＃34; #category1＆＃34;。它的工作原理如下。如何获取id以便将此代码压缩到一个块中？此外，这仍然是一项正在进行中的工作，所以一旦我弄清楚这一步，我想将mouseenter和mouseleave结合起来使用相同的i值，我还不知道如何继续使用该部分。

Answer 1

从触发事件的类中获取id：

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

下次制作一个JSFiddle，但这是我为你制作的一个，表明它有效。

https://jsfiddle.net/3yn4e0ng/

在控制台中查看是否已获得您的身份证明。

最后，您的比较语句会出现以下问题：

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

因为jQuery没有返回（#）符号。您明确要求id，因此jQuery没有理由将#符号传回字符串，表明this是{{1} }}

请考虑一下：

id

注意： 除非您对jQuery的id是否不安全，否则您没有理由使用if (id == "category1") {i = 1};而不是== fetches是string类型。阅读这篇惊人的帖子：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。

从事件触发器获取id

2 个答案: