将事件回调函数添加到内部带有Font Awesome图标的按钮

编程问答 2022-08-13

问题描述

我的标题上有一个搜索栏，默认情况下我将其隐藏起来，旁边有一个按钮以根据特定条件显示/隐藏它。我使用Font Awesome制作了按钮内容，如果隐藏了搜索栏以表示“显示搜索”，则在其中放置搜索图标，如果显示搜索栏以表示“隐藏搜索”，则在右侧放置人字形图标。

我编写js的方式是，单击按钮后，如果事件目标包含某些类，则搜索栏将显示/隐藏，问题是事件目标可以是i元素（字体真棒）或button元素。单击以显示搜索栏时，这不是问题，但是单击以隐藏搜索栏时，当事件目标为button元素时，似乎无法触发回调函数。我真的希望我有道理。

这是我的JSfiddle-https://jsfiddle.net/42uoLsrk/2/ 

function showHideSearch(e) {
    e.preventDefault;
    const searchBar = document.querySelector("#search");
    const searchButton = document.querySelector("#search-button");

    if (
        e.target.classList.contains("show-btn") ||
        e.target.classList.contains("fa-search")
    ) {
        searchBar.classList.add("show-search");
        searchButton.innerHTML = `<i class="fas fa-chevron-right"></i>`;
    } else if (
        e.target.classList.contains("fa-chevron-right") ||
        e.target.innerHTML == `<i class="fas fa-chevron-right"></i>`
    ) {
        searchBar.classList.remove("show-search");
        searchButton.innerHTML = `<i class="fas fa-search"></i>`;
    }
}

我特别在JS的第24行：

e.target.innerHTML == `<i class="fas fa-chevron-right"></i>`

我觉得它确实应该工作，因为当显示搜索栏时，innerHTML元素的button就是这样，但是它不起作用。

谢谢。

解决方法

我创建了jsfiddle here的更新版本。我修复了一些问题，首先，因为仅使用getElementById就可以得到元素。接下来，无论您是要关闭输入字段还是打开输入字段，都将始终有相当大的机会按下该按钮，因此您应该创建一个变量来检查输入是打开还是关闭。如果已打开并且单击了按钮，则将其关闭，反之亦然。

const searchDiv =   document.getElementById("search-div");
let open = false;
// ADD EVENT LISTENERS
searchDiv.addEventListener("click",showHideSearch);

// FUNCTION: SHOW/HIDE SEARCH BAR ON BUTTON CLICK
function showHideSearch(e) {
    e.preventDefault;
    const searchBar = document.querySelector("#search");
    const searchButton = document.querySelector("#search-button");
    if (
        (e.target.classList.contains("show-btn") ||
        e.target.classList.contains("fa-search")) && !open
    ) {
        searchBar.classList.add("show-search");
        searchButton.innerHTML = `<i class="fas fa-chevron-right"></i>`;            open = true;
    } else if (
       ( e.target.classList.contains("fa-chevron-right") ||
                e.target.id == "search-button") && open
    ) {
        searchBar.classList.remove("show-search");
        searchButton.innerHTML = `<i class="fas fa-search"></i>`;
        open = false;
    }
}
/* GENERAL */
:root {
    --light-color: #ccc;
    --lighter-color: #f4f4f4;
    --dark-color: #333;
    --darker-color: #222;
    --brand-color: #ff4;
    --danger: #f44;
    --danger-dark: #c00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--dark-color);
    color: var(--light-color);
    font-family: "Trebuchet MS";
}

ul li {
    list-style: none;
}

button,input {
    outline: none;
}

/* UTILITY */
.highlight {
    color: var(--brand-color);
}

.show-search {
    width: 100% !important;
    border: black 2px solid;
    padding: 0.6rem 1rem;
}

/* HEADER */
header {
    background: var(--darker-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    padding: 1.8rem 6rem;
    width: 100%;
}

#logo {
    font-size: 2.4rem;
    font-weight: 200;
}

#search-div {
    width: auto;
    height: auto;
    display: flex;
    gap: 0.4rem;
}

.show-btn {
    padding: 0.6rem 0.7rem;
    background: var(--light-color);
    border-radius: 5px;
    border: none;
    transition: ease-in 300ms;
    font-size: 1.2rem;
    cursor: pointer;
    height: 100%;
    width: 3rem;
}

.show-btn:hover {
    background: var(--brand-color);
    transition: ease-in 300ms;
}

#search {
    width: 0;
    height: 100%;
    background: var(--lighter-color);
    color: var(--darker-color);
    font-size: 1.2rem;
    border-radius: 2px;
    transition: ease-in 300ms;
    border: none;
}
<head>
    <script src="https://kit.fontawesome.com/3ad7573e76.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div id="logo-div">
            <h1 id="logo">
                <span class="highlight"><i class="fas fa-user-friends"></i></span> My<span
                    class="highlight">Contact</span>List
            </h1>
        </div>
        <div id="search-div">
            <button id="search-button" class="show-btn"><i class="fas fa-search"></i></button>
            <input id="search" type="text" placeholder="Search contacts...">
        </div>
    </header></body>

如果您需要更多说明，请随时询问。

font-awesomehtmljavascript