我有一个问题,希望可以解决。
$(".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,则原始内容的显示不起作用?
有人有什么解决方案吗?
最好的祝福
您只需要使用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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句