Какой лучший способ объединить код в цикле? - PullRequest
1 голос
/ 14 октября 2019

Как мне объединить следующий код в цикле? Моя цель - повторить классы .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();
});

Ответы [ 2 ]

1 голос
/ 14 октября 2019

Используйте классы и атрибуты данных и игнорируйте весь код копирования и вставки.

$(".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>
1 голос
/ 14 октября 2019

По сути, вы делаете два цикла: внешний цикл для .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();
      }
    }
  });
}

Хотя комментарии верны, вы можете проверить, есть ли лучшее решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...