如何隐藏增加元素的显示

Question

我想制作两部分的块，当我将鼠标悬停到标题(id=0(时，id=0的图像将显示出来，依此类推，当我鼠标移出img隐藏时。如果默认，id为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

您需要这样做。

$("[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();
});

同时在开始时隐藏除第一个以外的所有内容。

Answer 2

代码的问题是count++将增加两次。这不是你想要的。如果你的标记足够简单，你实际上可以简单地使用.index()来获得标题的相对索引，然后使用.eq()来找到相应索引的图像。为了避免需要声明唯一的ID，您可以将一个共享类附加到所有后滑块标题，并将另一个类附加到全部后滑块图像：

$('.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>

如果这不是一个选项，那么您可以简单地将索引存储在HTML5data-属性中：

$('.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>