JQuery Multiple Hover, чтобы показать DIV Refactor - PullRequest
Новая
       40

JQuery Multiple Hover, чтобы показать DIV Refactor

0 голосов
/ 30 октября 2018

Я пытаюсь сократить этот код с помощью наиболее элегантного решения. Я хотел бы некоторый вклад, если кто-то может помочь. Спасибо! Я предполагаю, что есть лучший способ сделать это. Будут ли классные занятия работать лучше? Любой совет приветствуется. Большое спасибо. 

$(document).ready(function() {
  $(".olay-1").hover(function() {
    $(".hpanel-1").fadeIn(500);
  }, function() {
    $(".hpanel-1").fadeOut(500);
  });
  $(".olay-2").hover(function() {
    $(".hpanel-2").fadeIn(500);
  }, function() {
    $(".hpanel-2").fadeOut(500);
  });
  $(".olay-3").hover(function() {
    $(".hpanel-3").fadeIn(500);
  }, function() {
    $(".hpanel-3").fadeOut(500);
  });
  $(".olay-4").hover(function() {
    $(".hpanel-4").fadeIn(500);
  }, function() {
    $(".hpanel-4").fadeOut(500);
  });
});


  <div class="hpanel-1">
      <h2>Hidden Text</h2>
  </div>
  <div class="hpanel-2">
      <h2>Hidden Text</h2>
  </div>
        <div class="hanel-3">
      <h2>Hidden Text</h2>
  </div>
        <div class="hpanel-4">
      <h2>Hidden Text</h2>
  </div>


    <div class="container">

      <div class="olay-1">
        Here is the info
      </div>
      <div class="olay-2">
        Here is the info
      </div>
      <div class="olay-3">
        Here is the info
      </div>
      <div class="olay-4">
        Here is the info
      </div>

    </div>

1 Ответ

0 голосов
/ 30 октября 2018

Если вы всегда сохраняете этот порядок (olay-i fades hpanel-i), вы можете использовать это: 

<!doctype html><html><head><title>Test</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
  $(".olay").hover(function() {
    $(".hpanel").eq($(this).index()).fadeIn(500);
  }, function() {
    $(".hpanel").eq($(this).index()).fadeOut(500);
  });
});
</script>
</head>
<body>

  <div class="hpanel">
      <h2>Hidden Text</h2>
  </div>
  <div class="hpanel">
      <h2>Hidden Text</h2>
  </div>
  <div class="hpanel">
      <h2>Hidden Text</h2>
  </div>
  <div class="hpanel">
      <h2>Hidden Text</h2>
  </div>

  <div class="container">

  <div class="olay">
    Here is the info
  </div>
  <div class="olay">
    Here is the info
  </div>
  <div class="olay">
    Here is the info
  </div>
  <div class="olay">
    Here is the info
  </div>
</div>
</body></html>
...