如何通过 jquery 或任何解决方案交换 html 类答案

【问题标题】：How can I swap html classes by jquery or any solution如何通过 jquery 或任何解决方案交换 html 类
【发布时间】：2022-01-24 15:02:41
【问题描述】：

下面有图片，寻找按钮（租、买、卖）。当我点击任何列出的按钮（租、买、卖）时，选定的按钮应该有白色背景，其余按钮应该没有背景。很快，选中的按钮应该会改变样式并被识别为选中。

$("#search-item2").on("click", function() {
  $(this).addClass("search__item--selected");
  $("#search-item1").removeClass("search__item--selected");
});

.search__item--selected {
  background-color: hsla(0, 0%, 100%, 0.7);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  text-transform: uppercase;
  border-radius: 15px 15px 0 0;
  padding: 7px 29px;
}

.search__item {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-color2);
  cursor: pointer;
  padding: 7px 29px;
}

:root {
  --text-color: blue;
  --text-color2: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search__tab">
  <div class="search__item--selected" id="search-item1">
    <p class="search__name">Rent</p>
  </div>
  <div class="search__item" id="search-item2">
    <p class="search__name">Buy</p>
  </div>
  <div class="search__item" id="search-item3">
    <p class="search__name">Sell</p>
  </div>
</div>

Image

【问题讨论】：

您实际上尝试过什么来实现类交换？
我尝试了几个变体，但这段代码是我的最后一稿，我现在有点困惑：$("#search-item2").on("click", function(){ $(this).addClass("search__item--selected"); $("#search-item1").removeClass("search__item--selected"); });
关键的教训是避免使用 ID 作为选择器（在 JavaScript 和 CSS 中），并使用 DOM 遍历来定位事件处理程序中的元素。这使得它可以重复使用。

标签： javascript html jquery css

【解决方案1】：

将“.search__item”添加到每个租/买/卖 div。

在点击事件时，移除 '.search__item--selected' 并为点击的元素添加此类

$(".search__item").on("click", function() {
  $(".search__item").removeClass("search__item--selected");
  $(this).addClass("search__item--selected");
});

body {
  background: #b6b5b5;
}

.search__item--selected {
  background-color: hsla(0, 0%, 100%, 0.7);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  text-transform: uppercase;
  border-radius: 15px 15px 0 0;
  padding: 7px 29px;
}

.search__item {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-color2);
  cursor: pointer;
  padding: 7px 29px;
}

:root {
  --text-color: blue;
  --text-color2: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search__tab">
  <div class="search__item search__item--selected" id="search-item1">
    <p class="search__name">Rent</p>
  </div>
  <div class="search__item" id="search-item2">
    <p class="search__name">Buy</p>
  </div>
  <div class="search__item" id="search-item3">
    <p class="search__name">Sell</p>
  </div>
</div>

【讨论】：