javascript - 如何制作一个函数但选择不同的 div(如 php 类)

Question

我是 Jquery 的新手，如何制作一个函数但选择不同的 div(如 php 类)？

这是我的代码:

$(document).ready(function(){
  $("#box-1").hover(function(){
    $("#mebox-1").removeClass("hide");
    $("#circle-1").addClass("hide");      
  });
  $("#box-1").mouseleave(function(){
    $("#mebox-1").addClass("hide");
    $("#circle-1").removeClass("hide");
  });
});

而且我想将此功能用于box-xxx。这是我的 HTML 代码示例:

<div id="box-1" class="box">
   <div id="circle-1" class="circle"></div>
   <div id="mebox-1" class="hide circle-bg">
      test
   </div>
</div>
<div id="box-2" class="box">
   <div id="circle-2" class="circle"></div>
   <div id="mebox-2" class="hide circle-bg">
      test
   </div>
</div>
<div id="box-3" class="box">
   <div id="circle-3" class="circle"></div>
   <div id="mebox-3" class="hide circle-bg">
      test
   </div>
</div>

Answer 1

尝试使用与这些元素相关联的通用类，最重要的是使用 this 引用，这样我们就可以将要移动的元素内的元素作为目标。

$(".box").hover(function(){
   $(".circle-bg",this).removeClass("hide");
   $(".circle",this).addClass("hide");      
},function(){
   $(".circle-bg",this).addClass("hide");
   $(".circle",this).removeClass("hide");  
});

DEMO