Как скрыть шоу для увеличения элемента

Question

Я хочу сделать блок из двух частей, когда я наведу курсор на заголовок (с id = 0), и будет показано изображение с id = 0 и так далее, когда я наведу курсор мыши на img hide. И если по умолчанию, изображение с идентификатором 0 будет активным. Я попробовал этот код ниже:

HTML

<div id="post_slider_img_id_0"><img class="img-1" src="#"></div>
<div id="post_slider_img_id_1"><img class="img-1"  src="#"></div>
<div id="post_slider_img_id_2"><img class="img-1"  src="#"></div>
<div id="post_slider_img_id_3"><img class="img-1"  src="#"></div>
<li id="post_slider_title_id_0"><a href="#">Title 01</a></li>
<li id="post_slider_title_id_1"><a href="#">Title 02</a></li>
<li id="post_slider_title_id_2"><a href="#">Title 03</a></li>
<li id="post_slider_title_id_3"><a href="#">Title 04</a></li>

JQUERY

var count = -1;
$("#post_slider_title_id_" + count++).mouseover(function() {
    $("#post_slider_img_id_" + count++).show();
}); 

Answer 1

Проблема с вашим кодом в том, что count++ будет увеличен в два раза. Это не то, что вы хотите. Если ваша разметка достаточно проста, вы можете просто использовать .index(), чтобы получить относительный индекс заголовка, а затем использовать .eq(), чтобы найти изображение соответствующего индекса. Чтобы избежать необходимости объявлять уникальные идентификаторы, вы можете прикрепить общий класс ко всем заголовкам слайдера и другой класс ко всем изображениям слайдера:

$('.post_slider_title').mouseover(function() {
  const i = $(this).index();
  $('.post_slider_img').eq(i).show();
});

.post_slider_img {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post_slider_img"><img class="img-1" src="https://via.placeholder.com/100x100?text=1"></div>
<div class="post_slider_img"><img class="img-1" src="https://via.placeholder.com/100x100?text=2"></div>
<div class="post_slider_img"><img class="img-1" src="https://via.placeholder.com/100x100?text=3"></div>
<div class="post_slider_img"><img class="img-1" src="https://via.placeholder.com/100x100?text=4"></div>

<ul>
  <li class="post_slider_title"><a href="#">Title 01</a></li>
  <li class="post_slider_title"><a href="#">Title 02</a></li>
  <li class="post_slider_title"><a href="#">Title 03</a></li>
  <li class="post_slider_title"><a href="#">Title 04</a></li>
</ul>

Если это не вариант, вы можете просто сохранить индекс в атрибуте HTML5 data-:

$('.post_slider_title').mouseover(function() {
  const i = this.dataset.target;
  
  $('#post_slider_img_id_' + i).show();
});

div[id^="post_slider_img_id_"] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post_slider_img_id_0"><img class="img-1" src="https://via.placeholder.com/100x100?text=1"></div>
<div id="post_slider_img_id_1"><img class="img-1" src="https://via.placeholder.com/100x100?text=2"></div>
<div id="post_slider_img_id_2"><img class="img-1" src="https://via.placeholder.com/100x100?text=3"></div>
<div id="post_slider_img_id_3"><img class="img-1" src="https://via.placeholder.com/100x100?text=4"></div>

<ul>
  <li class="post_slider_title" data-target="0"><a href="#">Title 01</a></li>
  <li class="post_slider_title" data-target="1"><a href="#">Title 02</a></li>
  <li class="post_slider_title" data-target="2"><a href="#">Title 03</a></li>
  <li class="post_slider_title" data-target="3"><a href="#">Title 04</a></li>
</ul>

Answer 2

Вам нужно сделать это следующим образом.

$("[id^=post_slider_title_id_]").mouseover(function() {
  $("#post_slider_img_id_0").hide();
  var id = '#post_slider_img_id_' + $(this).attr("id").replace('post_slider_title_id_','');
  $(id).show();
});

$("[id^=post_slider_title_id_]").mouseout(function() {
  var id = '#post_slider_img_id_' + $(this).attr("id").replace('post_slider_title_id_','');
  $(id).hide();
  $("#post_slider_img_id_0").show();
});

Также скрыть все, кроме первого, при запуске.