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" });
});

Answer 2

1）当您致电.replaceWith($("<img>"), ...)时，您不会将搜索ID保留在您的图片中。

更新： .replaceWith($("<img id='search'>"), ...)

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"); });

Answer 3

@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>

New One line 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");
    });

Answer 4

此帖子中有很多帖子，我只是想将可能有同样问题的用户发布给我的代码：

    $(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');;
            }
        });
    })

Answer 5

您可以在单个代码中包含操作像这样

$（“＃search”）。click（function（）{

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

或可能正在使用

$（“＃search”）。click（function（）{

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

Jquery使两个函数一起运行

5 个答案: