显示不同的元素，如果该类具有类 active。

huangapple
go评论106阅读模式
英文:

Show different element if the the class has the class active

问题

Sure, here's the translated code:

  1. #摘要
  2. 我正在使用走马灯作为导航。
  4.     <div class="swiper-slide state1 swiper-slide-active">状态 1</div>
  7.     <div class="swiper-slide state2 ">状态 2</div>
  10.     <p class="state1-content">状态 1</p>
  12.    
  13.     <p class="state2-content">状态 2</p>
  15.     .state2-content {
  16.       display:none;
  17.     }
  19.     <script>
  20.       jQuery(".grad-nav .swiper-slide").addClass(function (i) {
  21.         return 'state' + (i + 1)
  22.      });
  23.      if (jQuery(".state1").hasClass("swiper-slide-active")) {
  24.        jQuery(".state1-content").fadeIn(300);
  25.        jQuery(".state2-content").fadeOut(300);
  26.      }
  28.      if (jQuery(".state2").hasClass("swiper-slide-active")) {
  29.         jQuery(".state2-content").fadeIn(300);
  30.      jQuery(".state1-content").fadeOut(300);
  31.      }
  32.     </script>
  33. #摘要
  34. 请帮助我。
  37. 我想在检测到具有活动类的情况下显示其他元素。

Note: The code has been translated, and only the translated parts are included in the response.

英文:

#Summary
I'm using a carousel as a navigation.

  1. &lt;div class=&quot;swiper-slide state1 swiper-slide-active&quot;&gt;STATE 1&lt;/div&gt;
  4. &lt;div class=&quot;swiper-slide state2 &quot;&gt;STATE 2&lt;/div&gt;
  7. &lt;p class=&quot;state1-content&quot;&gt;state 1&lt;/p&gt;
  10. &lt;p class=&quot;state2-content&quot;&gt;state 2&lt;/p&gt;
  12. .state2-content {
  13.   display:none;
  14. }
  16. &lt;script&gt;
  17.   jQuery(&quot;.grad-nav .swiper-slide&quot;).addClass(function (i) {
  18.     return &#39;state&#39; + (i + 1)
  19.  });
  20.  if (jQuery(&quot;.state1&quot;).hasClass(&quot;swiper-slide-active&quot;)) {
  21.    jQuery(&quot;.state1-content&quot;).fadeIn(300);
  22.    jQuery(&quot;.state2-content&quot;).fadeOut(300);
  23.  }
  25.  if (jQuery(&quot;.state2&quot;).hasClass(&quot;swiper-slide-active&quot;)) {
  26.     jQuery(&quot;.state2-content&quot;).fadeIn(300);
  27.  jQuery(&quot;.state1-content&quot;).fadeOut(300);
  28.  }
  29. &lt;/script&gt;

#Summary
Please help me.

I would like to show other element if the class detects that it has class active.

答案1

得分: 3

使用if else条件不是处理多个元素的通用方式。因此，在这里是适用于您情况的代码：

CSS

  1.     <style>
  2.         .state2-content {
  3.              display:none;
  4.         }
  5.     </style>

HTML

  1.     <div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
  2.     <div class="swiper-slide state2">STATE 2</div>
  3.     <p class="state1-content">state 1</p>
  4.     <p class="-content">state 2</p>

Script

  1.     <script>
  2.       $(document).ready(function() {
  3.         $(".grad-nav .swiper-slide").addClass(function (index) {
  4.           return 'state' + (index + 1);
  5.         });
  6.     
  7.         $(".grad-nav .swiper-slide").on('click', function() {
  8.           var activeState = $(this).attr('class').split(' ')[1];
  9.           $(".grad-nav .state-content").fadeOut(300);
  10.           $("." + activeState + "-content").fadeIn(300);
  11.         });
  12.       });
  13.     </script>
英文:

Using if else condition is not a generic way for multiple elements.So, here is the code that works fine in your case:

CSS

  1. &lt;style&gt;
  2.     .state2-content {
  3.          display:none;
  4.     }
  5. &lt;/style&gt;

HTML

  1. &lt;div class=&quot;swiper-slide state1 swiper-slide-active&quot;&gt;STATE 1&lt;/div&gt;
  2. &lt;div class=&quot;swiper-slide state2&quot;&gt;STATE 2&lt;/div&gt;
  3. &lt;p class=&quot;state1-content&quot;&gt;state 1&lt;/p&gt;
  4. &lt;p class=&quot;-content&quot;&gt;state 2&lt;/p&gt;

Script

  1. &lt;script&gt;
  2.   $(document).ready(function() {
  3.     $(&quot;.grad-nav .swiper-slide&quot;).addClass(function (index) {
  4.       return &#39;state&#39; + (index + 1);
  5.     });
  7.     $(&quot;.grad-nav .swiper-slide&quot;).on(&#39;click&#39;, function() {
  8.       var activeState = $(this).attr(&#39;class&#39;).split(&#39; &#39;)[1];
  9.       $(&quot;.grad-nav .state-content&quot;).fadeOut(300);
  10.       $(&quot;.&quot; + activeState + &quot;-content&quot;).fadeIn(300);
  11.     });
  12.   });
  13. &lt;/script&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2.     $(&quot;.grad-nav .swiper-slide&quot;).addClass(function (index) {
  3.       return &#39;state&#39; + (index + 1);
  4.     });
  6.     $(&quot;.grad-nav .swiper-slide&quot;).on(&#39;click&#39;, function() {
  7.       var activeState = $(this).attr(&#39;class&#39;).split(&#39; &#39;)[1];
  8.       $(&quot;.grad-nav .state-content&quot;).fadeOut(300);
  9.       $(&quot;.&quot; + activeState + &quot;-content&quot;).fadeIn(300);
  10.     });
  11.   });

<!-- language: lang-css -->

  1. .state2-content {
  2.         display:none;
  3.     }

<!-- language: lang-html -->

  1. &lt;div class=&quot;swiper-slide state1 swiper-slide-active&quot;&gt;STATE 1&lt;/div&gt;
  2. &lt;div class=&quot;swiper-slide state2&quot;&gt;STATE 2&lt;/div&gt;
  3. &lt;p class=&quot;state1-content&quot;&gt;state 1&lt;/p&gt;
  4. &lt;p class=&quot;state2-content&quot;&gt;state 2&lt;/p&gt;
  7. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 11:09:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76428362.html
  • javascript
  • jquery
  • jquery-mobile
  • jquery-plugins
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定