Wie kann ich einem angeklickten Element eine aktuelle Klasse hinzufügen und es entfernen, wenn Sie auf ein anderes Element klicken?

Question

Ich bin nicht sehr gut in JavaScript und die meiste Zeit benutze ich andere Leute Arbeit. Ich möchte wissen, wie ich dem folgenden Code eine aktuelle Klasse hinzufügen kann, damit ich Änderungen an dem ausgewählten Element vornehmen kann. Dank

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

können Sie

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

verwenden und entfernen Sie mit

$(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

Sie addClass und removeClass wie unten verwenden:

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

Wie pro Ihre Q - geklickt Element und das Entfernen es, wenn auf einem anderen Element zu klicken?

Sie haben $(this).addClass('ClassRemove'); erste $('yourEl').removeClass('ClassRemove'); verwenden dann, so dass die ganze Klasse, die yourEl Namen ClassRemove der Klasse entfernt werden und nur das Element, das Sie mit der Klasse ClassRemove

hinzugefügt werden Klicken Aber wie Sie haben ein if condition dafür, so dass es keine Notwendigkeit gibt, $('yourEl').removeClass('ClassRemove') zu verwenden. Ich habe den Code gemäß Ihrem Kommentar aktualisiert.

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'); 
 
      } 
 
    }); 
 
}

a p{ 
 
    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

ich Ihren Code ein bisschen reorganisiert haben es leichter zu machen jQuery Selektoren zu verwenden, um zu tun, was Sie wollen.

Version 1: Highlight Link

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>

Version 2: Highlight Behälter

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>