javascript - How to add class to only one of multiple same elements - Stack Overflow

admin管理员组

文章数量:1345387

I have three same items in the DOM. Exactly what I mean is a wobbling line <span class="caret"></span>

<ul>
  <li class="nav-item-1">
   <a href="#">ITEM 1</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-2">
   <a href="#">ITEM 2</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-3">
   <a href="#">ITEM 3</a>  
   <span class="caret"></span>
  </li>  
</ul>

Scenario: I click on the first <span class="caret"></span> gets the class "open", and the rest still has only "caret". I click on the second <span class="caret"></span> gets the class "open", and in the first the class "open" is removed. Is it possible? I wrote something like this:

$(".caret").click(function () {
  $(this).data('clicked', true);
  if ($('.caret').data('clicked')) {
    $(".caret").toggleClass('opened');
  }
});

It works, but all "caret" classes get toggleClass('opened') and I just want it to get the one you click on...

I have three same items in the DOM. Exactly what I mean is a wobbling line <span class="caret"></span>

<ul>
  <li class="nav-item-1">
   <a href="#">ITEM 1</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-2">
   <a href="#">ITEM 2</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-3">
   <a href="#">ITEM 3</a>  
   <span class="caret"></span>
  </li>  
</ul>

Scenario: I click on the first <span class="caret"></span> gets the class "open", and the rest still has only "caret". I click on the second <span class="caret"></span> gets the class "open", and in the first the class "open" is removed. Is it possible? I wrote something like this:

$(".caret").click(function () {
  $(this).data('clicked', true);
  if ($('.caret').data('clicked')) {
    $(".caret").toggleClass('opened');
  }
});

It works, but all "caret" classes get toggleClass('opened') and I just want it to get the one you click on...

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 4, 2020 at 15:20 Szymon Jagiełło asked Feb 4, 2020 at 14:19 Szymon JagiełłoSzymon Jagiełło 9366 bronze badges 5

• 2 That HTML is invalid. A span can not be a child of a UL. You have an unclosed anchor element – epascarello Commented Feb 4, 2020 at 14:32
• Please fix the invalid HTML. – connexo Commented Feb 4, 2020 at 14:50
• Don't forget to mark answer – Libra Commented Feb 4, 2020 at 14:56
• I did mark answer. Thanks guys – Szymon Jagiełło Commented Feb 4, 2020 at 15:12
• write css for span like unset and set – Jacky Commented Feb 27, 2020 at 10:34

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

You were on the right track by using $(this) but then reverted back to using $('.caret'). Do this:

$(".caret").click(function () {
     $(this).toggleClass('opened');
});

---

Askers request to close all other .caret classes:

$(".caret").click(function () {
    $(".caret").removeClass('opened');
    $(this).addClass('opened');
});

Your HTML is invalid so it is going to produce wrong HTML Markup in the browser. Not knowing how you actually want it to look, I can not offer a solution on fixing it. Once you get it fixed, The basic code should be

$('.caret').on('click', function () {
    $('.caret.opened') // all the open carets
      .not(this) // removed the one that was clicked
      .removeClass('opened'); // remove the class
    $(this)
      .toggleClass('opened'); // toggle the one that was clicked
      //.addClass('opened'); // if you want it always open
});

if one always has to be opened

$('.caret').on('click', function () {
    $('.caret.opened') // all the open carets
      .removeClass('opened'); // remove the class
    $(this)
      .addClass('opened'); // set clicked to open
});

I have a feeling you might have meant this

having a span in a UL is invalid HTML

$(".nav-item a").on("click",function(e) {
  e.preventDefault();
  $(".caret").removeClass('opened');
  $(this).next(".caret").addClass('opened'); // could toggle if needed
});

.caret::after { content: "

                本文标签：
                javascriptHow to add class to only one of multiple same elementsStack Overflow

                        版权声明：本文标题：javascript - How to add class to only one of multiple same elements - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1743811260a2543107.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。