在悬停时将类添加到共享类的另一个元素

Question

我有两个容器，一个是一个盒子网格，每个盒子里面有文本，另一个是链接列表。

在每个容器中，一个盒子和一个物品将共享一个类。

我想将鼠标悬停在其中一个链接上，并向与链接共享同一类的框的子项添加类。

我可以通过使用做到这一点

 $(function(){ $(".item-list").children(".class-one").mouseover(function() { $("#grid").children(".class-one").children("h1").addClass("red").siblings("p").addClass("purple"); }); $(".item-list").children(".class-one").mouseleave(function() { $("#grid").children(".class-one").children("h1").removeClass("red").siblings("p").removeClass("purple"); }); $(".item-list").children(".class-two").mouseover(function() { $("#grid").children(".class-two").children("h1").addClass("red").siblings("p").addClass("purple"); }); $(".item-list").children(".class-two").mouseleave(function() { $("#grid").children(".class-two").children("h1").removeClass("red").siblings("p").removeClass("purple"); }); });

 .container { display: flex; justify-content: center; align-items:flex-start; } #grid .box { padding: 2rem; } #grid .box h1, p { font-family: sans-serif; margin: 1rem; color: blue; } .item-list { display: flex; flex-direction: column; } .item-list a { display: inline-block; margin: 1rem 0; color: goldenrod; font-weight: bold; text-decoration: none; font-family: sans-serif; } .item-list a:hover { text-decoration: underline; } .red { color: red !important; text-decoration: underline; } .purple { color: purple !important; text-decoration: underline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="grid"> <div class="box class-one"> <h1>Box One</h1> <p>box one right here</p> </div> <div class="box class-two"> <h1>Box Two</h1> <p>box two right here</p> </div> </div> <div class="item-list"> <a class="class-one">Item One</a> <a class="class-two">Item Two</a> </div> </div>

但这似乎很快就会失控，因为我计划有很多相同的类，而且我不想一遍又一遍地重复相同的代码。

任何帮助是极大的赞赏。

Answer 1

您可以将event delegation与 JQuery 的.on使用：

 $(function(){ //This fires the event whenever an anchor element of element with //className item-list has mouseover $(".item-list").on('mouseover', 'a', function(){ //Get the class of the anchor which corresponds to the box const anchorClasses = $(this).attr("class").split(/\\s+/); //Get the classes of the anchor const anchorClassIWant = anchorClasses.filter(function(c) { return c.indexOf("class-") > -1 ;}); //use the class of the anchor in our selector to get the proper grid elements $("#grid").children("." + anchorClassIWant).children("h1").addClass("red").siblings("p").addClass("purple"); }); //This fires the event whenever an anchor element of element with //className item-list has mouseleave $(".item-list").on('mouseleave', 'a', function(){ //Get the class of the anchor which corresponds to the box const anchorClasses = $(this).attr("class").split(/\\s+/); //Get the classes of the anchor const anchorClassIWant = anchorClasses.filter(function(c) { return c.indexOf("class-") > -1 ;}); //use the class of the anchor in our selector to get the proper grid elements $("#grid").children("." + anchorClassIWant ).children("h1").removeClass("red").siblings("p").removeClass("purple"); }); });

 .container { display: flex; justify-content: center; align-items:flex-start; } #grid .box { padding: 2rem; } #grid .box h1, p { font-family: sans-serif; margin: 1rem; color: blue; } .item-list { display: flex; flex-direction: column; } .item-list a { display: inline-block; margin: 1rem 0; color: goldenrod; font-weight: bold; text-decoration: none; font-family: sans-serif; } .item-list a:hover { text-decoration: underline; } .red { color: red !important; text-decoration: underline; } .purple { color: purple !important; text-decoration: underline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="grid"> <div class="box class-one"> <h1>Box One</h1> <p>box one right here</p> </div> <div class="box class-two"> <h1>Box Two</h1> <p>box two right here</p> </div> </div> <div class="item-list"> <a class="class-one">Item One</a> <a class="class-two">Item Two</a> </div> </div>