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

问题描述 投票：0回答：3

当使用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>
javascript html jquery css
3个回答
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

我添加了新课程

.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>
1
投票

因此，我个人将在iconWrapper div上使用psuedo元素，然后仅打开和关闭一个类，以隐藏或显示相应的伪元素。您可以将图像作为它们的内容值，也可以使用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>
1
投票

我创建了一个可重用的函数，以便将来在需要时可以更改另一个img src。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.