获取第二个<div>中对应的元素

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

Get corresponding element in second <div>

问题

  1. (function ($) {
  2.   $(&quot;.collapsible-title&quot;).on(&quot;click&quot;, function () {
  3.     $(this).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-title&quot;).removeClass(&quot;is-active&quot;);
  4.     $(&quot;.collapsible-content&quot;).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-content&quot;).removeClass(&quot;is-active&quot;);
  5.   });
  6. });
英文:

I have this format.

  1. &lt;div class=&quot;container&quot; style=&quot;display: flex;&quot;&gt;
  2. 	&lt;div style=&quot;width: 25%;&quot;&gt;
  3. 		&lt;div class=&quot;collapsible-title is-active&quot;&gt;Title 1
  4. 			&lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  5. 		&lt;/div&gt;
  6. 		&lt;div class=&quot;collapsible-title&quot;&gt;Title 2
  7. 			&lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  8. 		&lt;/div&gt;
  9. 	&lt;/div&gt;
  10. 	&lt;div style=&quot;width: 75%;&quot;&gt;
  11. 		&lt;div class=&quot;collapsible-content is-active&quot;&gt;
  12. 			&lt;h3&gt;Title 1 Content&lt;/h3&gt;
  13. 			&lt;p&gt;
  14.               Lorem Ipsum is simply dummy text.
  15.             &lt;/p&gt;
  16. 		&lt;/div&gt;
  17. 		&lt;div class=&quot;collapsible-content&quot;&gt;
  18. 			&lt;h3&gt;Title 2 Content&lt;/h3&gt;
  19. 			&lt;p&gt;
  20.               Lorem Ipsum has been the industry&#39;s standard dummy text.
  21.             &lt;/p&gt;
  22. 		&lt;/div&gt;
  23. 	&lt;/div&gt;
  24. &lt;/div&gt;

Now when I click on "Title 2" on first div, I want to remove all "is-active" class, and put "is-active" class in "Title 2" form first div and div of "Title 2 content" in second div.

  1. (function ($) {
  2.   $(&quot;.collapsible-title&quot;).on(&quot;click&quot;, function () {
  3.     $(this).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-title&quot;).removeClass(&quot;is-active&quot;);
  4.     $(&quot;.collapsible-content&quot;).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-content&quot;).removeClass(&quot;is-active&quot;);
  5.   });
  6. });

答案1

得分: 1

If the order of the elements are the same then you can add .eq($(this).index()) to your code.

  1. $(".collapsible-title").on("click", function() {
  2.   $(this).addClass("is-active").siblings(".collapsible-title").removeClass("is-active");
  3.   $(".collapsible-content").eq($(this).index()).addClass("is-active").siblings(".collapsible-content").removeClass("is-active");
  4. });

This will add the class to the corresponding div to the clicked element.

英文:

If the order of the elements are the same then you can add .eq($(this).index()) to your code.

  1. $(&quot;.collapsible-title&quot;).on(&quot;click&quot;, function() {
  2.   $(this).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-title&quot;).removeClass(&quot;is-active&quot;);
  3.   $(&quot;.collapsible-content&quot;).eq($(this).index()).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-content&quot;).removeClass(&quot;is-active&quot;);
  4. });

This will add the class to the corresponding div to the clicked element.

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

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

  1. $(&quot;.collapsible-title&quot;).on(&quot;click&quot;, function() {
  2.   $(this).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-title&quot;).removeClass(&quot;is-active&quot;);
  3.   $(&quot;.collapsible-content&quot;).eq($(this).index()).addClass(&quot;is-active&quot;).siblings(&quot;.collapsible-content&quot;).removeClass(&quot;is-active&quot;);
  4. });

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

  1. .collapsible-content {
  2.   display: none;
  3. }
  5. .collapsible-content.is-active {
  6.   display: block;
  7. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;container&quot; style=&quot;display: flex;&quot;&gt;
  3.   &lt;div style=&quot;width: 25%;&quot;&gt;
  4.     &lt;div class=&quot;collapsible-title is-active&quot;&gt;Title 1
  5.       &lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  6.     &lt;/div&gt;
  7.     &lt;div class=&quot;collapsible-title&quot;&gt;Title 2
  8.       &lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  9.     &lt;/div&gt;
  10.   &lt;/div&gt;
  11.   &lt;div style=&quot;width: 75%;&quot;&gt;
  12.     &lt;div class=&quot;collapsible-content is-active&quot;&gt;
  13.       &lt;h3&gt;Title 1 Content&lt;/h3&gt;
  14.       &lt;p&gt;
  15.         Lorem Ipsum is simply dummy text.
  16.       &lt;/p&gt;
  17.     &lt;/div&gt;
  18.     &lt;div class=&quot;collapsible-content&quot;&gt;
  19.       &lt;h3&gt;Title 2 Content&lt;/h3&gt;
  20.       &lt;p&gt;
  21.         Lorem Ipsum has been the industry&#39;s standard dummy text.
  22.       &lt;/p&gt;
  23.     &lt;/div&gt;
  24.   &lt;/div&gt;
  25. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是翻译好的内容：

无论点击哪个 div，它的内容都会显示。您是否在寻找类似于这样的效果？

  1. var title1Tab = document.getElementById('title1-tab');
  2. var title2Tab = document.getElementById('title2-tab');
  3. var title1Content = document.getElementById('title1-content');
  4. var title2Content = document.getElementById('title2-content');
  6. title1Tab.addEventListener('click', () => {
  7.   title1Content.classList.remove('non-active');
  8.   title1Content.classList.add('is-active');
  9.   title2Content.classList.remove('is-active');
  10.   title2Content.classList.add('non-active');
  11. });
  13. title2Tab.addEventListener('click', () => {
  14.   title2Content.classList.remove('non-active');
  15.   title2Content.classList.add('is-active');
  16.   title1Content.classList.remove('is-active');
  17.   title1Content.classList.add('non-active');
  18. });
  1. .is-active {
  2.   display: block;
  3. }
  5. .non-active {
  6.   display: none;
  7. }
  1. <div class="container" style="display: flex;">
  2.   <div style="width: 25%;">
  3.     <div class="collapsible-title is-active" id="title1-tab">Title 1
  4.       <i class="fas fa-solid fa-chevron-right"></i>
  5.     </div>
  6.     <div class="collapsible-title" id="title2-tab">Title 2
  7.       <i class="fas fa-solid fa-chevron-right"></i>
  8.     </div>
  9.   </div>
  10.   <div style="width: 75%;">
  11.     <div class="collapsible-content is-active" id="title1-content">
  12.       <h3>Title 1 Content</h3>
  13.       <p>
  14.         Lorem Ipsum is simply dummy text.
  15.       </p>
  16.     </div>
  17.     <div class="collapsible-content non-active" id="title2-content">
  18.       <h3>Title 2 Content</h3>
  19.       <p>
  20.         Lorem Ipsum has been the industry's standard dummy text.
  21.       </p>
  22.     </div>
  23.   </div>
  24. </div>
英文:

Whichever div is clicked, its content is displayed. Are you looking for something like this?

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

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

  1. var title1Tab=document.getElementById(&#39;title1-tab&#39;);
  2. var title2Tab=document.getElementById(&#39;title2-tab&#39;);
  3. var title1Content=document.getElementById(&#39;title1-content&#39;);
  4. var title2Content=document.getElementById(&#39;title2-content&#39;);
  6. title1Tab.addEventListener(&#39;click&#39;,()=&gt;{
  7.   title1Content.classList.remove(&#39;non-active&#39;);
  8.   title1Content.classList.add(&#39;is-active&#39;);
  9.   title2Content.classList.remove(&#39;is-active&#39;);
  10.   title2Content.classList.add(&#39;non-active&#39;);
  11. })
  12. title2Tab.addEventListener(&#39;click&#39;,()=&gt;{
  13.   title2Content.classList.remove(&#39;non-active&#39;);
  14.   title2Content.classList.add(&#39;is-active&#39;);
  15.   title1Content.classList.remove(&#39;is-active&#39;);
  16.   title1Content.classList.add(&#39;non-active&#39;);
  17. })

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

  1. .is-active{
  2.   display:block;
  3. }
  4. .non-active{
  5.   display:none;
  6. }

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

  1. &lt;div class=&quot;container&quot; style=&quot;display: flex;&quot;&gt;
  2.     &lt;div style=&quot;width: 25%;&quot;&gt;
  3.         &lt;div class=&quot;collapsible-title is-active&quot; id=&quot;title1-tab&quot;&gt;Title 1
  4.             &lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  5.         &lt;/div&gt;
  6.         &lt;div class=&quot;collapsible-title&quot; id=&quot;title2-tab&quot;&gt;Title 2
  7.             &lt;i class=&quot;fas fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;
  8.         &lt;/div&gt;
  9.     &lt;/div&gt;
  10.     &lt;div style=&quot;width: 75%;&quot;&gt;
  11.         &lt;div class=&quot;collapsible-content is-active&quot; id=&quot;title1-content&quot;&gt;
  12.             &lt;h3&gt;Title 1 Content&lt;/h3&gt;
  13.             &lt;p&gt;
  14.               Lorem Ipsum is simply dummy text.
  15.             &lt;/p&gt;
  16.         &lt;/div&gt;
  17.         &lt;div class=&quot;collapsible-content non-active&quot; id=&quot;title2-content&quot;&gt;
  18.             &lt;h3&gt;Title 2 Content&lt;/h3&gt;
  19.             &lt;p&gt;
  20.               Lorem Ipsum has been the industry&#39;s standard dummy text.
  21.             &lt;/p&gt;
  22.         &lt;/div&gt;
  23.     &lt;/div&gt;
  24. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 14:27:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/76032232.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定