如何简要介绍我的jquery代码？

Question

我已经写了下面的代码和2个问题: 1)我希望当光标悬停在带有details类的div上时，整个div的颜色都会改变，但在内部div上的代码中不会这样做。2)为所有div编写的jquery代码行几乎是相同的，我有很多这样的div。我可以写我的代码摘要来避免重复吗？

你能告诉我怎么做吗？

​

$(".detail-1").hover(function() {
  $(".detail-1 div:first-child").css("background-color", "green");
  $(".detail-1 div:nth-child(2) p").css("color", "blue");
})
$(".detail-1").mouseout(function() {
  $(".detail-1 div:first-child").css("background-color", "#41b5e7");
  $(".detail-1 div:nth-child(2) p").css("color", "black");
})


$(".detail-2").hover(function() {
  $(".detail-2 div:first-child").css("background-color", "yellow");
  $(".detail-2 div:nth-child(2) p").css("color", "blue");
})
$(".detail-2").mouseout(function() {
  $(".detail-2 div:first-child").css("background-color", "#41b5e7");
  $(".detail-2 div:nth-child(2) p").css("color", "black");
})


$(".detail-3").hover(function() {
  $(".detail-3 div:first-child").css("background-color", "pink");
  $(".detail-3 div:nth-child(2) p").css("color", "blue");
})
$(".detail-3").mouseout(function() {
  $(".detail-3 div:first-child").css("background-color", "#41b5e7");
  $(".detail-3 div:nth-child(2) p").css("color", "black");
})

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div>
  </div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div>
  </div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div>
  </div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

​

Answer 1

这里不需要jQuery，你可以使用这个CSS来做以下事情。

最好的方法是将类添加到div中，并以此为目标。但是如果你不能编辑你的代码，那么检查@RoryMcCrossan的答案。

因为尽管CSS中的psuedo选择器很有用，而且当然可以按照您的方式使用，但尽可能使用ids和类要好得多。这也意味着更容易理解代码。

因此，首先，将一个类添加到更改颜色的div和包含文本的div，如下所示：

<div class="color-block"></div>
<div class="text-block"></div>

然后像这样用CSS瞄准这些对象：

.detail-1:hover .color-block {
    background: green;
}

.detail-1:hover .text-block {
    color: blue;
}

示例代码片段

​

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

.detail-1:hover .color-block {
  background: green;
  }

.detail-1:hover .text-block {
  color: blue;
  }

<div class="details detail-1" data-number="1">
  <div class="color-block">
  </div>
  <div class="text-block">
    <p>text-1</p>
    <p>Description-1</p>
  </div>
</div>

​

由于您在所有容器div上也有details类，如果您希望所有这些div都更改为相同的背景色或/和文本颜色，您可以这样做：

.details:hover .color-block {
    background: green;
}

.details:hover .text-block {
    color: blue;
}

Answer 2

您当前的问题是既使用了hover() (本身就是mouseenter和mouseleave)又使用了mouseout。这意味着您实际上引发了几个事件。要解决这个问题，可以单独使用hover()并提供两个函数参数。第一个用于mouseenter，第二个用于mouseleave。

​

$(".detail-1").hover(function() {
  $(".detail-1 div:first-child").css("background-color", "green");
  $(".detail-1 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-1 div:first-child").css("background-color", "#41b5e7");
  $(".detail-1 div:nth-child(2) p").css("color", "black");
})

$(".detail-2").hover(function() {
  $(".detail-2 div:first-child").css("background-color", "yellow");
  $(".detail-2 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-2 div:first-child").css("background-color", "#41b5e7");
  $(".detail-2 div:nth-child(2) p").css("color", "black");
})

$(".detail-3").hover(function() {
  $(".detail-3 div:first-child").css("background-color", "pink");
  $(".detail-3 div:nth-child(2) p").css("color", "blue");
}, function() {
  $(".detail-3 div:first-child").css("background-color", "#41b5e7");
  $(".detail-3 div:nth-child(2) p").css("color", "black");
})

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div></div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div></div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div></div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

​

请注意，更好的方法是使用:hover伪选择器单独使用CSS来实现相同的悬停状态效果。这也会通过代理让你的代码干掉。

​

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}
.detail-1:hover div:first-child { background-color: green; }
.detail-2:hover div:first-child { background-color: yellow; }
.detail-3:hover div:first-child { background-color: pink; }
.details:hover div:nth-child(2) p { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div></div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div></div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div></div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

​

Answer 3

首先，注意elementID是一个字符串。您可以通过将重复的代码包装到它自己的函数中并传入elementID来重新编写函数。这将减少你剪切和粘贴代码的次数。