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

Question

I have a problem, which I hope can be solved..

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

Eventhough I am using classes instead of ID's all blocks are flipped on click.. If use $(this).find the display of the original content does not work?

Does anyone has any solution?

Best Regards

Answer 1

You simply need to use this .

$(this).hide() will hide only the clicked item.
$(this).siblings('.back').slideDown('fast'); will find a sibling item of class .back and slide down it, not affecting other .back elements.

Working demo:

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