Jquery为多个按钮切换类

Question

下一个按钮使用PHP循环来自数据库的信息，因此我有多个按钮。当我将鼠标悬停在图像上时，view-data类的按钮将切换d-block类，但我希望它只显示下一个按钮，而不是所有按钮。我该怎么做？

$(document).ready(function() {
$(".product-img").hover(function() {
$(".view_data").toggleClass("d-block");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="product-img" style="width:100%;" />
<input type="button" name="view" value="Quick View" class="view_data">

Answer 1

要实现这一点，您不需要任何JS/jQuery代码。您只需在相关的img和按钮input元素上使用:hover选择器，即可使相关的同级元素成为display: block。试试这个：

img {
width: 50px;
height: 50px;
background-color: #F00;
display: block;
}
input[type="button"] {
display: none;
}
img:hover+input[type="button"],
input[type="button"]:hover {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="product-img" />
<input type="button" name="view" value="Quick View" class="view_data">
<img class="product-img" />
<input type="button" name="view" value="Quick View" class="view_data">
<img class="product-img" />
<input type="button" name="view" value="Quick View" class="view_data">