在循环中合并代码的更好方法是什么？

Question

如何在循环中合并以下代码？我的目标是在课程结束时重复 .node 和 .visual-content 类，并带有连续的数字。

$s(".node1").hover(function () {
$s(".visual-content1").fadeIn("slow");
$s(".visual-content2").fadeOut();
$s(".visual-content3").fadeOut();
$s(".visual-content4").fadeOut();
$s(".visual-content5").fadeOut();
$s(".visual-content6").fadeOut();
$s(".visual-content7").fadeOut();
$s(".visual-content8").fadeOut();
$s(".visual-content9").fadeOut();
$s(".visual-content10").fadeOut();
});
$s(".node2").hover(function () {
$s(".visual-content2").fadeIn();
$s(".visual-content1").fadeOut();
$s(".visual-content3").fadeOut();
$s(".visual-content4").fadeOut();
$s(".visual-content5").fadeOut();
$s(".visual-content6").fadeOut();
$s(".visual-content7").fadeOut();
$s(".visual-content8").fadeOut();
$s(".visual-content9").fadeOut();
$s(".visual-content10").fadeOut();
});

Answer 1

基本上，您执行两个循环：.nodes 的外部循环和视觉内容的内部循环。这将像这样工作：

for(let i = 1; i <= 10; i++){
$s(".node"+i).hover(function(){
$s(".visual-content"+i).fadeIn("slow");
for(let j = 1; j <= 10; j++){
if(j != i){
$s(".visual-content"+j).fadeOut();
}
}
});
}

尽管注释是正确的，但您可能需要检查是否有更好的解决方案。

Answer 2

使用类和数据属性并忽略所有复制粘贴代码。

$(".node").on("mouseenter", function () {
var toggles = $(this).data('toggles')
$('.content').not(toggles).fadeOut()
$(toggles).fadeIn()
})

.content {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="node" data-toggles="#content1">One</li>
<li class="node" data-toggles="#content2">Two</li>
<li class="node" data-toggles="#content3">Three</li>
</ul>
<div id="content1" class="content">One Content</div>
<div id="content2" class="content">Two Content</div>
<div id="content3" class="content">Three Content</div>