如何仅在所选列表项上创建jQuery Toggle

问题描述

我有一个带有默认活动班级的列表。当我单击“选择我”按钮时，我希望活动班级更改为被单击的那个li中的那个按钮，并删除上一个班级。

它确实这样做，但是它也在每个列表项上添加了活动类。

我如何才能仅在单击按钮的位置上切换班级？

不确定我的CSS是否正确，还是可以通过jQuery完成？

这是一个演示： https://jsfiddle.net/capymq5j/1/

$('.select-offer').on('click',function(e) {
  // $('.button-group').not(this).removeClass('inactive').addClass('active');
  // $(this).addClass('active').removeClass('inactive');

  $('.button-group').toggleClass("active nothng");
  // $(".button-group").removeClass("active");
  // $(this).find(".button-group").toggleClass("active");
  e.preventDefault();
});

.button-group {
  & .cta {
    display: none;
  }
}

.button-group.active {
  & .cta {
    display: block;
  }
  & .select-offer {
    display: none;
  }
}

ul,li {
  list-style-type: none;
}

li {
  display: inline-block;
  border: 1px solid grey;
  padding: 10px;
  margin: 20px 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="button-group active">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>
</ul>

解决方法

使用相对于this的DOM导航。因此，$(this).closest(".button-group")仅选择包含单击按钮的按钮组。

您可以从所有按钮中删除active类，然后将该类添加到所选元素中。

$('.select-offer').on('click',function(e) {
  $('button-group').removeClass('active').addClass('nothing');
  $(this).closest('.button-group').addClass('active').removeClass('nothing');
  e.preventDefault();
});

.button-group {
  & .cta {
    display: none;
  }
}

.button-group.active {
  & .cta {
    display: block;
  }
  & .select-offer {
    display: none;
  }
}

ul,li {
  list-style-type: none;
}

li {
  display: inline-block;
  border: 1px solid grey;
  padding: 10px;
  margin: 20px 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="button-group active">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>
</ul>

,

$('.select-offer').on('click',function(e) {
  $(this).parent().toggleClass("active");
  e.preventDefault();
});

.button-group .cta {
    display: none;
}

.button-group.active .cta {
    display: block;
}
.button-group.active.select-offer {
    display: none;
}


ul,li {
  list-style-type: none;
}
ul{display:flex;}
li {
  display: inline-block;
  border: 1px solid grey;
  padding: 10px;
  margin: 20px 12px;
  height:100%;
}
.button-group{
  height:100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>

  <li>
    <div class="button-group">
      <a href="#" class="select-offer">Select me</a>
      <a href="#" class="cta">cta 1</a>
      <a href="#" class="cta">cta 2</a>
    </div>
  </li>
</ul>

请尝试此操作