向带有 Font Awesome 图标的按钮添加事件回调函数

Question

我的 header 上有一个搜索栏，默认情况下我将其隐藏，并在 show/hide 旁边有一个按钮，具体取决于特定条件。我使用 Font Awesome 制作了按钮内容，如果隐藏了搜索栏以指示“显示搜索”，我将放置一个搜索图标，如果显示搜索栏以指示“隐藏搜索”，我将放置一个右 V 形图标。

我写我的 js 的方式是点击按钮时，如果事件目标包含某些类，搜索栏将 show/hide，问题是事件目标可以是i 元素（Font Awesome）或 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>`

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

提前致谢。

Answer 1

我创建了一个更新版本的 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 Awesome 图标的按钮添加事件回调函数

Adding an event callback function to a button with a Font Awesome icon inside

html

javascript

css

font-awesome