Jquery 带有ID和Hover的增量函数

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/ 因为你更改的 class 名称是相同的。

$("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 的建议，您可以使用类而不是 id。

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

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

Jquery 带有ID和Hover的增量函数

Jquery incrementation function with ID and Hover

jquery

increment

repeat