Javascript Jquery使两个函数一起运行

我有一个搜索按钮，我想在单击该按钮的同时更改图标以及边框的颜色：

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

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

HTML

---

发生这种情况是因为您第二次声明

$（“#搜索”）。单击（函数（）{…

将覆盖第一个函数。因此，只需将希望发生的所有事情都放在同一

中。单击
函数

每行后面还需要分号

根据@jbehrens94关于ID丢失的注释，这里是我的最终代码

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

$（“#搜索”）。单击（函数（）{
$（this）.replaceWith（$）（'这是因为您第二次声明
$（“#搜索”）。单击（函数（）{…
您将覆盖第一个函数。因此，只需将希望发生的所有事情都放在同一个
函数中。单击
函数

每行后面还需要分号

根据@jbehrens94关于ID丢失的注释，这里是我的最终代码

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

$（“#搜索”）。单击（函数（）{
$（this）.replaceWith（$（'1）调用
.replaceWith（$（“”），…）
时，不会将搜索id保留在图像中

更新：
。替换为（$（“”），…）

2） 在编辑我的答案之前，我已经给了你这个建议

$(function(){

  var search = $('#search');

  search.click(function(){
    search.replaceWith(...).css(...);
  });

});

这样，您的代码将只进入DOM一次，以获取HTML。这是为了获得良好的性能，而且它还确保您使用的是您想要使用的元素

3） 您还询问了淡入/淡出。您可以使用jQuery的
fadeIn（duration，completeCallback）
和
fadeOut（duration，completeCallback）
函数。持续时间以毫秒为单位，回调是一个匿名函数，但您也可以调用另一个函数

$（“#search”）.fadeIn（400，function（）{alert（“fladein”）}）
1）调用
.replacetwith（$（“”），…）
时，不会将搜索id保留在图像中

更新：
。替换为（$（“”），…）

2） 在编辑我的答案之前，我已经给了你这个建议

$(function(){

  var search = $('#search');

  search.click(function(){
    search.replaceWith(...).css(...);
  });

});

这样，您的代码将只进入DOM一次，以获取HTML。这是为了获得良好的性能，而且它还确保您使用的是您想要使用的元素

3） 您还询问了淡入/淡出。您可以使用jQuery的
fadeIn（duration，completeCallback）
和
fadeOut（duration，completeCallback）
函数。持续时间以毫秒为单位，回调是一个匿名函数，但您也可以调用另一个函数

$（“#search”）.fadeIn（400，function（）{alert（“Faded in”）}）
您可以在单个代码中包含操作
像这样

$（“#搜索”）。单击（函数（）{

$（“#search”）.css（{“border”：“2px”，“border style”：“ridge”，“border color”：“#000000”）。替换为（$（'
或者可能被使用

$（“#搜索”）。单击（函数（）{

$（“#search”）.css（{“border”：“2px”，“border style”：“ridge”，“border color”：“#000000”）.html（$（'您可以只在单个代码中包含to操作
像这样

$（“#搜索”）。单击（函数（）{

$（“#search”）.css（{“border”：“2px”，“border style”：“ridge”，“border color”：“#000000”）。替换为（$（'
或者可能被使用

$（“#搜索”）。单击（函数（）{

$（“#search”）.css（{“border”：“2px”，“border style”：“ridge”，“border color”：“#000000”）.html（$（'@Jeppe我刚才用了不同的方式尝试过

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

}

.border-change{
    border: 2px ridge #000000 !important; 

}

你的Html

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



新的单行jquery

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$("#search").click(function () {
     $("#search").addClass("border-change").attr("src","Icons/magnifier.jpg");
    });


$（“#搜索”）。单击（函数（）{
$（“#search”）.addClass（“border change”）.attr（“src”、“Icons/magnifier.jpg”）；
});
@Jeppe我刚刚尝试了不同的方法

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

}

.border-change{
    border: 2px ridge #000000 !important; 

}

你的Html

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



新的单行jquery

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
$("#search").click(function () {
     $("#search").addClass("border-change").attr("src","Icons/magnifier.jpg");
    });


$（“#搜索”）。单击（函数（）{
$（“#search”）.addClass（“border change”）.attr（“src”、“Icons/magnifier.jpg”）；
});
此线程中有很多帖子，我只想将为我工作的代码发布给可能有相同问题的用户：

    $(function () {
        var search = $("#search");

        search.click(function () {
            search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
        });
        $('html').click(function (e) {
            if (e.target.id != 'search') {
                $("#search").attr("src", "Icons/magnifier2.png");
                $("#search").removeAttr('style');;
            }
        });
    })

在这个帖子中有很多帖子，我只想把为我工作的代码发布给可能有相同问题的用户：

    $(function () {
        var search = $("#search");

        search.click(function () {
            search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
        });
        $('html').click(function (e) {
            if (e.target.id != 'search') {
                $("#search").attr("src", "Icons/magnifier2.png");
                $("#search").removeAttr('style');;
            }
        });
    })

$（函数（）{$（“#搜索”）。单击（函数（）{$（“#搜索”）.css（{“边框”：“2px”，“边框样式”：“脊线”，“边框颜色”：“#000000”）；$（“#搜索”）。替换为（$（''，{src:'Icons/magnifier.png'）；}）现在我的函数如下。但是它仍然在做同样的事情吗？啊，我浏览了一下你正在使用的
replaceWith
。试着把那一行放在
css
行之前。我会更新我的答案。使用replaceWith是否不正确？-下一步是给它一个带文本框的滑出函数，这样人们可以ke搜索。如果你明白我的意思。应该可以，但是
replaceWith
基本上会删除元素并插入你指定的新内容。这意味着它会删除你对CSSS所做的更改，直到同一个问题。正如@jbehrens94所提到的，我是否应该链接它们？$（函数（）{$（“#搜索”）。单击（函数（）{$（“#搜索”）.css（{“边框”：“2px”，“边框样式”：“脊线”，“边框颜色”：“#000000”）；$（“#搜索”）。替换为（$（''，{src:'Icons/magnifier.png'）；}）现在我的函数如下。但是它仍然在做同样的事情吗？啊，我浏览了一下你正在使用的
replaceWith
。试着把那一行放在
css
行之前。我会更新我的答案。使用replaceWith是否不正确？-下一步是给它一个带文本框的滑出函数，这样人们可以ke搜索。如果你明白我的意思。应该可以，但是
replaceWith
基本上删除了e