javascript - 尝试显示和隐藏元素失败

Question

我有不同的数据集，当有人点击他们想要查看的信息的按钮时，我想显示这些数据。其中一部分现在正在运行，我希望第一 block 信息在页面加载时显示。但是，每当我单击其他按钮时，信息容器就会消失并且不显示任何内容。我的控制台中没有显示任何错误，我也看不出我做错了什么。

有没有人看到我忽略的任何东西？

$( document ).ready(function() {
     $('.big-three-names').click(function() {
         var i = $( this ).html();
         $('.big-three-info').css("display", "none")
         $('.big-three-info').eq(i-1).css("display", "block");
     });

     $('.big-three-info').eq(0).css("display", "block");
});

.big-three-out {
	background-color: #CCC;
	width: 100%;
	margin: auto 0;
/*	padding: 15px 0;*/
}
.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;	
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在隐藏/显示方法中，当您需要的只是索引时，您正在引用元素的 HTML。

像这样:

$( document ).ready(function() {
  $('.big-three-names').click(function() {
    var i = $( this ).index();
    $('.big-three-info').fadeOut()  //.css("display", "none")
    $('.big-three-info').eq(i).fadeIn()  //.css("display", "block");
  });
  $('.big-three-info').eq(0).css("display", "block");
});

.big-three-out {
	background-color: #CCC;
	width: 100%;
	margin: auto 0;
/*	padding: 15px 0;*/
}
.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;	
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>