[英]How can I add current class to a clicked element and removing it when clicking on another element?
I am not very good at JavaScript and most of the time I use other people's work. 我不擅长JavaScript,大多数时候我都在使用其他人的工作。 I want to know how I can add a current class to the following code so that I can make changes to selected element.
我想知道如何将当前类添加到以下代码中,以便我可以对所选元素进行更改。 Thanks
谢谢
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('link1');"> <div> <p>link1</p> </div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone('link2');"> <div> <p>link2</p> </div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div>
You can use 您可以使用
$(this).addClass('current-class');
and remove with 并删除
$(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('link1');"><div><p class='link'>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone('link2');"><div><p class='link'>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div>
You can use addClass and removeClass as below: 您可以使用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");
}
});
}
As per your Q - clicked element and removing it when clicking on another element? 根据你的Q 点击元素并在点击另一个元素时将其删除?
you will have to use $('yourEl').removeClass('ClassRemove');
你将不得不使用
$('yourEl').removeClass('ClassRemove');
first then $(this).addClass('ClassRemove');
首先是
$(this).addClass('ClassRemove');
, so that all the class which name yourEl
will be removed the class ClassRemove
and only the element you click will be added with the Class ClassRemove
,这样所有名为
yourEl
的类都将被删除ClassRemove
类,只有你点击的元素才会被添加Class ClassRemove
But as you have an if condition
for that so there is no need to use $('yourEl').removeClass('ClassRemove')
. 但是因为你有一个
if condition
,所以不需要使用$('yourEl').removeClass('ClassRemove')
。 I have updated the code as per your comment. 我根据您的评论更新了代码。
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('link1');"><div><p>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone('link2');"><div><p>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div>
I've reorganized your code a bit to make it easier to use jQuery selectors to do what you want. 我已经重新组织了一些代码,以便更轻松地使用jQuery选择器来执行您想要的操作。
Version 1: Highlight link 版本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>
Version 2: Highlight container 版本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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.