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

debugcn 发表于 Dev

耶尔姆

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

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

我想将鼠标悬停在链接之一上，并将类添加到与该链接共享同一类的框的子级中。

我可以通过使用

$(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>

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

任何帮助是极大的赞赏。

瑞安·威尔逊（Ryan Wilson）

您可以为此使用event delegationJQuery .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>