每个按钮单击添加一个多个元素答案

【问题标题】：Add an multiple Element each Button clicked每个按钮单击添加一个多个元素
【发布时间】：2022-06-15 11:17:14
【问题描述】：

我有 5 个按钮，每次单击按钮都会添加每个元素。我担心的是当我单击返回上一个按钮时。我只需要一个前一个元素将被添加，其他元素将被删除.. 例子：如果点击 5. 它显示 5 add(element) 如果然后我点击回到click3，它只显示3个元素并删除element[5]和element[4]。

let clickItem;
for (let c = 1; c < 6; c++) {
  clickItem = document.getElementsByClassName('click-item-' + c);
  $(clickItem).on('click', function() {
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>

<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

您可以添加一个将inactive 类放入所有项目的函数，然后重新运行该函数。

let clickItem;
for (let c = 1; c < 6; c++) {
  clickItem = document.getElementsByClassName('click-item-' + c);
  $(clickItem).on('click', function() {
    resetContext()
    $('.child-item').not(this).removeClass('active');
    $(this).addClass('active')
    $(".add-item").slice(0, c).removeClass("inactive");
  })
}

const resetContext = () => {
  const elements = document.getElementsByClassName("add-item");
  for (const elem of elements){
    elem.classList.remove('active');
    elem.classList.add('inactive');
  }
}

<style>.active {
  display: block;
  background-color: blue;
}

.inactive {
  display: none;
}

</style>

<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>

<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

【讨论】：