javascript - Jquery 使两个函数一起运行

Question

我有一个搜索按钮，我想在点击它的同时更改图标和边框的颜色:

$(function () {
    $("#search").click(function () {
        $("#search").css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" })
    });

    $("#search").click(function () {
        $("#search").replaceWith($('<img>', { src: 'Icons/magnifier.png' }))
    });
});

现在，我的两个函数单独工作，但当我将两者结合使用时，就像在我的示例中一样，只有最后一个会触发。

有没有一种方法可以将这两个功能结合起来，以便当我单击它时边框和图像都会发生变化？

盒子的 CSS:

.topnav img {
    border: 2px ridge #7ab5dc;
    position: relative;
    height: 20px;
    width: 20px;
    float: right;
    margin-top:15px;
    margin-right:20px;
    padding:3px;
    border-radius: 5px;
}

HTML

       <div class="topnav">
            <img id="search" class="search" src="Icons/magnifier2.png" />
        </div>

Answer 1

发生这种情况是因为您第二次声明 $("#search").click(function () { ... 时您覆盖了第一个函数。因此，只需放入您想要的所有内容在同一个 .click 函数中发生

每行后还需要分号。

根据@jbehrens94 关于 ID 丢失的说明，这是我的最终代码

$("#search").click(function () {
    $(this).replaceWith($('<img id="search">', { src: 'Icons/magnifier.png' })).css({ "border": "2px", "border-style": "ridge", "border-color": "#000000" });
});