如何將當前類添加到單擊的元素並在單擊其他元素時將其刪除？

Question

我不擅長JavaScript，大多數時候我都在使用其他人的工作。 我想知道如何將當前類添加到以下代碼中，以便我可以對所選元素進行更改。 謝謝

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"> <div> <p>link1</p> </div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"> <div> <p>link2</p> </div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 1

您可以使用

$(this).addClass('current-class');

並刪除

$(this).removeClass('current-class');

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); $('.link').each(function(index) { if ($(this).text() == thechosenone) { $(this).addClass('current'); } else { $(this).removeClass('current'); } }); } 

 .current { display: inline-block; padding: 5px 10px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"><div><p class='link'>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"><div><p class='link'>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 2

您可以使用addClass和removeClass，如下所示：

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
               $(this).addClass("current");
          }
          else {
               $(this).hide(600);
               $(this).removeClass("current");
          }
     });
}

Answer 3

根據你的Q 點擊元素並在點擊另一個元素時將其刪除？

你將不得不使用$('yourEl').removeClass('ClassRemove'); 首先是$(this).addClass('ClassRemove'); ，這樣所有名為yourEl的類都將被刪除ClassRemove類，只有你點擊的元素才會被添加Class ClassRemove

但是因為你有一個if condition ，所以不需要使用$('yourEl').removeClass('ClassRemove') 。 我根據您的評論更新了代碼。

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); $(this).prev('a').addClass('current'); } else { $(this).hide(600); $(this).prev('a').removeClass('current'); } }); } 

 ap{ margin:0; padding:0; } .current{ border:1px #000 solid; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"><div><p>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"><div><p>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 4

我已經重新組織了一些代碼，以便更輕松地使用jQuery選擇器來執行您想要的操作。

版本1：突出顯示鏈接

 function highlightLink(event) { event.preventDefault(); var $otherParents = $(this) .parent() .siblings(".newbox_parent"); $otherParents.children(".newboxes").hide(600); $otherParents.children("a").removeClass("current"); $(this).siblings(".newboxes").show(200); $(this).children("p").addClass("current"); } $(".newbox_parent > a").click(highlightLink); 

 .current { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="newbox_parent"> <a href="#"> <p>link1</p> </a> <div class="newboxes" style="display: none"> <p>Content1</p> </div> </div> <div class="newbox_parent"> <a href="#"> <p>link2</p> </a> <div class="newboxes" style="display: none"> <p>Content2</p> </div> </div> 

版本2：突出顯示容器

 function highlightLink(event) { event.preventDefault(); var $parent = $(this) .parent() .addClass("current") .siblings(".newbox_parent") .removeClass("current") .children(".newboxes") .hide(600); $(this).siblings(".newboxes").show(200); } $(".newbox_parent > a").click(highlightLink); 

 .current { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="newbox_parent"> <a href="#"> <p>link1</p> </a> <div class="newboxes" style="display: none"> <p>Content1</p> </div> </div> <div class="newbox_parent"> <a href="#"> <p>link2</p> </a> <div class="newboxes" style="display: none"> <p>Content2</p> </div> </div>