jQuery DIV的显示/隐藏不起作用

Question

我有一个问题，希望可以解决。

 $(".front").click(function(){ $('.front').css("display","none"); $('.back').slideDown('fast'); }); $(".back").click(function(){ $(".back").hide(); $(".front").slideDown("fast"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a> <a id="iconblock" class="back iconblock" style="display: none;">text content</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a> <a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a> <a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div> 

即使我使用类而不是ID，所有块都在单击时翻转。如果使用$（this）.find，原始内容的显示不起作用？

有没有人有解决方案？

最好的祝福

Answer 1

您只需要使用this 。

$(this).hide()将仅隐藏单击的项目。
$(this).siblings('.back').slideDown('fast'); 将找到.back类的同级项并将其向下滑动，而不影响其他.back元素。

工作演示：

 $(".front").click(function() { $(this).hide(); $(this).siblings('.back').slideDown('fast'); }); $(".back").click(function() { $(this).hide(); $(this).siblings('.front').slideDown('fast'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a> <a id="iconblock" class="back iconblock" style="display: none;">text content</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a> <a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a> <a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div> 

Answer 2

 $(".front").click(function() { $(this).hide(); $(this).next('.back').slideDown('fast'); }); $(".back").click(function() { $(this).hide(); $(this).prev('.front').slideDown('fast'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image</a> <a id="iconblock" class="back iconblock" style="display: none;">text content</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dewfgdf.png);">image2</a> <a id="iconblock" class="back iconblock" style="display: none;">text content2</a></div> <div class="cat"> <a id="iconblock" class="front iconblock" style="background-image: url(dfgdf.png);">image3</a> <a id="iconblock" class="back iconblock" style="display: none;">text content3</a></div>