带有ID和悬停的jQuery增量函数答案

【问题标题】：Jquery incrementation function with ID and Hover带有ID和悬停的jQuery增量函数
【发布时间】：2021-12-24 17:24:20
【问题描述】：

我如何在下面编写此函数而无需每次都重复相同的代码。感谢您的帮助。

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

【问题讨论】：

你的方法肯定是有问题和错误的。使用类而不是 id，以及 data-index 属性和 this。添加相关的 HTML，以便我们提供帮助。
在#zone-N和#projects-N元素上使用通用类，通过DOM遍历找到相关内容。如果您需要如何执行此操作的具体示例，请更新您的问题以包含 HTML 的小示例

标签： jquery increment repeat

【解决方案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>

【讨论】：

非常感谢您的帮助！这是完美的。

【解决方案2】：

按照@connexo 的建议，您可以使用类而不是 id。

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

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

【讨论】：