Jquery Show/Hide 共 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'); 会找到 class .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>

Jquery Show/Hide 共 DIV 个不工作

Jquery Show/Hide of DIV not working

javascript

css

jquery

jquery-selectors