jquery - 如果另一个元素具有类，则更改元素的可见性

Question

我正在尝试使用 jQuery 创建一些基本功能。

我有5个容器，当点击其中一个容器时，需要显示下面的一段内容。之后单击另一个容器时，我想显示另一段。 (例如，当单击步骤 3 时，我希望显示第 3 段)。

我尝试创建一个单击函数，该函数查找元素是否具有事件类，然后显示 X 编号的段落。但是我不知道如何隐藏所有其他段落以仅显示该段落。我还希望这些段落淡入。

这是我的 jsfiddle :

$("div").click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

	$(".step1").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text1" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step2").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text2" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step3").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text3" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step4").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text4" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

	$(".step5").click(function() {
  		if($(this).hasClass("active")){
  			$( ".text5" ).show( "fast" );
  			$(this).siblings.hide();
  		}
	});

.text1, .text2, .text3, .text4, .text5 {
  		display: none;
  	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step1 active">
	<h3>Step 1</h3>
</div>

<div class="step2">
	<h3>Step 2</h3>
</div>

<div class="step3">
	<h3>Step 3</h3>
</div>

<div class="step4">
	<h3>Step 4</h3>
</div>

<div class="step5">
	<h3>Step 5</h3>
</div>

<p class="text1">Ius cu iusto prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text2">legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text3">Prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text4">Legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text5">Set, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His at rebum postulant forensibus.</p>

Answer 1

这是一种实现您想要的目标的重复性要低得多的方法。

步骤和文本框都具有相同的类(表示它们是什么类型的元素)，但具有不同的数据属性，通过公共(public) ID 将它们链接在一起。

$(function() {
  $(".step").click(function() {
      var textID = $(this).data("textid");
      $(".text").hide();
      var text = $(".text[data-textid=" + textID + "]").show("fast");
  });
});

.text
{
  display: none;
  padding: 5px;
  border: 1px solid #cccccc;
}
.step { cursor:pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step" data-textID="1">
  <h3>Step 1</h3>
</div>

<div class="step" data-textid="2">
  <h3>Step 2</h3>
</div>

<div class="step" data-textid="3">
  <h3>Step 3</h3>
</div>

<div class="step" data-textid="4">
  <h3>Step 4</h3>
</div>

<div class="step" data-textid="5">
  <h3>Step 5</h3>
</div>

<p class="text" data-textid="1">Ius cu iusto prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat
  singulis honestatis ut. His at rebum postulant forensibus.</p>
<p class="text" data-textid="2">legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His
  at rebum postulant forensibus.</p>
<p class="text" data-textid="3">Prodesset, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis
  ut. His at rebum postulant forensibus.</p>
<p class="text" data-textid="4">Legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis ut. His
  at rebum postulant forensibus.</p>
<p class="text" data-textid="5">Set, per legimus gubergren liberavisse ex, sit sint semper fabulas ex. At eum sumo iudicabit posidonium, ex his assum nonumy eloquentiam. An tritani nonumes mei, at diam facer posidonium sed. Has id dicit partem regione. Vim soleat singulis honestatis
  ut. His at rebum postulant forensibus.</p>