如何将当前类添加到单击的元素并在单击其他元素时将其删除？

Question

我不擅长JavaScript，而且大部分时间我都在使用其他人的工作。我想知道如何将当前类添加到以下代码中，以便我可以对所选元素进行更改。 感谢

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用

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

并删除

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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类只会删除您点击的元素添加班级ClassRemove

但是因为你有if condition，所以不需要使用$('yourEl').removeClass('ClassRemove')。我根据您的评论更新了代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我已经重新组织了一些代码，以便更轻松地使用jQuery选择器来完成你想要的工作。

版本1：突出显示链接

＆＃13;

＆＃13;

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

＆＃13;

.current {
  border: 1px solid green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

版本2：突出显示容器

＆＃13;

＆＃13;

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

＆＃13;

.current {
  border: 1px solid green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;