Переключение между значком поиска и значком отмены

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

Я создал многократно используемую функцию, чтобы вы могли изменить другой img sr c, например, в будущем, если хотите.

var searchIcon = document.getElementsByClassName("searchIcon")[0];

function togglesrc(obj, icon_off, icon_on){
  if(obj.src == icon_off){
    obj.src = icon_on;
  }
  else{
     obj.src = icon_off;
  }
}

searchIcon.addEventListener("click",function(){
   document.querySelector(".search").classList.toggle("active");
   
   var icon_on = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQc3j87kFSpq-XNafMC9V14xUyePHRRXpPMed4O_vH_nGWfLjE-dn0&s=0";
   
   var icon_off = "https://www.telegram.org/img/t_logo.png";
  togglesrc(this, icon_off, icon_on);
});

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 2

Итак, я лично использовал бы элементы psuedo в div iconWrapper, а затем просто включал и выключал класс, скрывая или показывая соответствующий псевдоэлемент. Вы можете поместить изображения в качестве значения их содержимого или использовать свойство background-image и установить изображения там.

var el = document.querySelector('.iconWrapper');

el.onclick = function() {
  el.classList.toggle('active');
}

.iconWrapper {
  width: 100px;
  height: 50px;
  background: blue;
  position: relative;
}

.iconWrapper:before, .iconWrapper:after {
  width: 50px;
  height: 50px;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -50px;
}

.iconWrapper:before {
 background: green;
 display: none;
}

.iconWrapper:after {
 background: red;
}

.iconWrapper.active:before { display: block; }
.iconWrapper.active:after { display: none; }

<div class="iconWrapper"></div>

Answer 3

Имеем go с этим

Я извлек стиль (у вас вместо знака равенства был опечатка-цвет после стиля) и спрятал второй значок

.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

Я добавил новый класс

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