javascript - 在搜索图标和取消图标之间切换

Question

当使用 jQuery 单击特定元素时，我需要在两个图标(基本上是搜索图标和取消图标)之间切换。在以下代码的情况下，点击时电报图标将更改为 Whatsapp 图标。我想在单击 Whatsapp 图标时改回电报图标。如果同样的代码也可以用 JavaScript 编写，我将不胜感激。

$(document).ready(function() {
  $(".searchIcon").click(function() {
    $(".search").toggleClass("active");

    $(".searchIcon").attr(
      "src",
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0"
    );
  });
});

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" alt="" style: "width: 20px; height:20px;"/>
    </div>
  </div>
</div>

Answer 1

试试这个

我提取了样式(样式后面有一个拼写错误 - 冒号而不是等号)并隐藏了第二个图标

.searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon:nth-child(2) {
  display: none;
}

jQuery

$(function() {
  $(".searchIcon").on("click",function() {
    $(".search").toggleClass("active");
    $(this).toggle()
    $(this).siblings().toggle()
  });
});

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}

.searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon:nth-child(2) {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon" src="https://www.telegram.org/img/t_logo.png" />
      <img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
    </div>
  </div>
</div>

普通 JS

我添加了一个新类(class)

.searchIcon {
  display: none;
}
.isVisible {
  display:block
}

window.addEventListener("load", function() { // page load
  document.querySelector(".searchIcon-wrapper").addEventListener("click", function(e) { // delegation
    const tgt = e.target;
    if (tgt.classList.contains("searchIcon")) { // one of the images
      document.querySelector(".search").classList.toggle("active"); 
      tgt.classList.toggle("isVisible");
      const sib = tgt.classList.contains("whatsapp") ? 1 : 2; // which did we click?
      document.querySelector(".searchIcon:nth-child("+sib+")").classList.toggle("isVisible");
    }
  });
});

body {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px;
  background: black;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: navy;
}

.preTopNav-Items {
  display: flex;
  flex-flow: row wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preTopNav-Items img {
  width: 20px;
  height: 20px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(250px + 20px + 7px + 7px);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  border: none;
  position: relative;
  height: 28px;
}

.search img:hover {
  cursor: pointer;
}

.searchIcon-wrapper {
  background-color: navy;
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0 7px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.search input {
  position: absolute;
  right: 0px;
  width: 250px;
  padding: 3px 10px;
  font-size: 16px;
  transform: translateX(calc(100% + 34px));
  transition: transform 0.5s ease-in-out;
}

.search.active input {
  transform: translateX(-34px);
}

.search.active {
  box-shadow: 10px 4px 10px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 1.5s;
}

.searchIcon {
  width: 20px;
  height: 20px;
}

.searchIcon {
  display: none;
}
.isVisible {
  display:block
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://kit.fontawesome.com/718022a53c.js" crossorigin="anonymous"></script>
<div class="container">
  <div class="preTopNav-Items search">
    <input type="text" class="searchBar" placeholder="Search..." />
    <div class="searchIcon-wrapper">
      <img class="searchIcon isVisible" src="https://www.telegram.org/img/t_logo.png" />
      <img class="searchIcon whatsapp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0" />
    </div>
  </div>
</div>