带有ID和Hover的Jquery增量函数

Question

我如何才能在不重复每次相同代码的情况下编写下面的函数。谢谢你的帮助。

        $("#zone-1").hover(function(){
            $("#projects-1").addClass('visible');
        }, function(){
            $("#projects-1").removeClass('visible');
        });

        $("#zone-2").hover(function(){
            $("#projects-2").addClass('visible');
        }, function(){
            $("#projects-2").removeClass('visible');
        });

        $("#zone-3").hover(function(){
            $("#projects-3").addClass('visible');
        }, function(){
            $("#projects-3").removeClass('visible');
        });                     

        $("#zone-4").hover(function(){
            $("#projects-4").addClass('visible');
        }, function(){
            $("#projects-4").removeClass('visible');
        });

Answer 1

使用https://api.jquery.com/attribute-starts-with-selector/获取起始属性值类似的元素："zone-“。然后使用$(this).attr('id');获取当前悬停元素的id

最后，用分隔符"-“分割id，然后得到这个数组的第二个元素"[1]”。https://www.w3schools.com/jsref/jsref_split.asp

最好使用toggleClass()：https://api.jquery.com/toggleclass/，因为您更改的类名是相同的。

​

$("div[id^='zone-']").hover(function(){
   // current id number
  let getDivID = $(this).attr('id').split('-')[1];
  $("#projects-" + getDivID).toggleClass('visible');
  
  // debug infos
  console.clear();
  console.log(getDivID);
});

.projects { display:none }
.visible { display:block }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zone-1">zone-1</div>
<div id="zone-2">zone-2</div>
<br><br>
<div id="projects-1" class="projects">projects-1</div>
<div id="projects-2" class="projects">projects-2</div>

​

Answer 2

正如@connexo所建议的，您可以使用类而不是ids。

这段代码可能需要一些调整，因为您没有提供HTML。

$(".zone").hover(function(){
    $(this).next(".projects").addClass("visible");
}, function() {
    $(this).next(".projects").removeClass("visible");
}