Jquery显示/隐藏DIV不起作用答案

【问题标题】：Jquery Show/Hide of DIV not workingJquery显示/隐藏DIV不起作用
【发布时间】：2015-10-28 19:24:02
【问题描述】：

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

$(".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 原始内容的显示不起作用？

有人有解决办法吗？

最好的问候

【问题讨论】：

而不是$('.front').css("display","none"); 使用$('.front').hide();
你想让它做什么？都应该是个人的？因此，如果您单击图像，只有那个会改变，而其他两个不会改变？如果是这样，那么您使用的是 class 而不是 ids 的事实就是原因。 jQuery 类选择器将选择该类的所有元素。

标签： javascript jquery css jquery-selectors

【解决方案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>

【讨论】：

$(this).siblings('.front' on .back 点击
@GuruprasadRao 谢谢！哦，那个复制粘贴... :)
感谢您的快速帮助。它工作得很好......我知道这是非常简单的事情......我正在尝试从最接近父母的选择器，但没有任何工作......
@MajaJelen，顺便说一下，$(this).siblings('.front') 会选择与$(this).parent().children('.front') 相同的项目。但是，在这种特定情况下是没有意义的:)
谢谢 :) 一切正常，除了在循环中这个动画正在移动和置换它周围的元素。有什么解决方案吗？

【解决方案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>

【讨论】：