Question

我有以下代码：

    $(function () {
        var search = $("#search");
        search.click(function () {
            search.replaceWith($("<img id='search' src='Icons/magnifier.png' >")).css({ "border": "2px", "border-style": "ridge", "border-color": "#000000", "padding-left": "130px", "transition": "all 500ms" });
        });

        $('html').click(function() {
            search.replaceWith($("<img id='search' src='Icons/magnifier2.png' >")).css({ "border": "2px", "border-style": "ridge", "border-color": "#000000", "padding-left": "3px", "transition": "all 500ms" });
        });
    })

这个想法是，当用户点击图标时，它会变为更暗的颜色，并且边框滑出（它应该包含一个输入框，但还没有制作它）至于现在，我可以单独使用.css和.replaceWith工作，但是当我将它们链接在一起时，只有图标会发生变化。当用户点击html的主体时，它应该滑回并将图标更改回原始图标。显然这不会发生。

HTML：

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

CSS：

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

Answer 1

试试这个。由于带有img的{{1}}是id ="search"标记的一部分，因此每次都会触发触发html事件。因此，方法是使用$('html').click的{{1}}来查看是否实际在图像内触发了点击。此外，由于您只是更改target.id的{{1}}和event，因此您无需更换该元素。

src

工作示例：http://jsfiddle.net/v01b216u/5/

Answer 2

这里的问题是html元素上有一个事件监听器处于活动状态，#search元素是其中的一部分。这意味着当您点击#search元素时，会触发这两个事件并且最后触发html - 事件，使其始终更改为magnifier2.png和padding: 3px

使.replaceWith和.css jquery一起工作

2 个答案: