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

Question

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

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

我尝试创建一个点击功能，它会发现元素是否有活动的 class，然后显示 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

尝试更改 slibings 选择器

在你的情况下 $(this).siblings.hide(); $(this) 是一个按钮而不是文本

... 

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

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

....

https://jsfiddle.net/f4w0zos7/24/

Answer 2

这是一种实现您想要的结果的重复性较低的方法。

步骤和文本框都具有相同的 class（以表示它们是什么类型的项目），但具有不同的数据属性 link 它们通过共同的 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>

Answer 3

请试试这个 $("p:not(.text2)").hide(); 而不是 $(".text2").siblings('p').hide(); 下面是 jQuery 片段：

$(".step1").click(function() {
        $( ".text1" ).fadeIn();
         $("p:not(.text1)").hide();

});

$(".step2").click(function() {
    $( ".text2" ).fadeIn();
         $("p:not(.text2)").hide();
});

$(".step3").click(function() {
    $( ".text3" ).fadeIn();
         $("p:not(.text3)").hide();
});

$(".step4").click(function() {
    $( ".text4" ).fadeIn();
         $("p:not(.text4)").hide();
});

$(".step5").click(function() {
    $( ".text5" ).fadeIn();
         $("p:not(.text5)").hide();
});

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

Change visibility of element if another element has a class

jquery

html

css

fade