jQuery .replaceWith 不工作答案

【问题标题】：jQuery .replaceWith Not WorkingjQuery .replaceWith 不工作
【发布时间】：2013-07-13 01:11:21
【问题描述】：

Google Blogger 使用 javascript 在小部件或可编辑区域上为管理员放置一个快速编辑图标。

这是 HTML：

<a class="quickedit" href="xxxxxx" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;BlogArchive1&quot;));" target="configBlogArchive1" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>

我正在尝试用 Font Awesome Icon 替换该图像。这是我使用的 jQuery：

$('a.quickedit img').replaceWith('<i class="icon-wrench"></i>');

原图还在，console.log里也没有相关的错误，为什么还是不行呢？顺便说一句，我使用的是 $(document).ready 函数，版本为 1.7.1。

编辑：我还注意到，使用它会破坏页面上的所有其他 jQuery 脚本。所以可能会有冲突。

这是没有我要添加的脚本的所有内容：

<script type='text/javascript'>
  $(document).ready(function() {
    $(&quot;.menu-toggle&quot;).click(function (e) {
        $(this).next(&#39;ul&#39;).slideToggle(&quot;fast&quot;);
    });
    $(&quot;#LinkList1 ul li&quot;).click(function (e) {
        $(this).find(&#39;ul&#39;).slideToggle(&quot;fast&quot;);
    });
    $(&quot;body a, .camera_prev, .camera_next, .camera_pag li&quot;).hover(function(){
        link_audio.play();
    },
    function(){
        link_audio.load();
    });
    $(window).scroll(function(){
        if ($(this).scrollTop() &gt; 100) {
            $(&#39;.scrollup&#39;).fadeIn();
        } 
        else {
            $(&#39;.scrollup&#39;).fadeOut();
        }
    }); 
    $(&#39;.scrollup&#39;).click(function(){
        $(&quot;html, body&quot;).animate({ scrollTop: 0 }, 600);
        return false;
    });
  });
</script>

再次编辑：无论我尝试什么，似乎所有其他脚本都会中断并且不再运行，并且在 console.log 中没有视觉错误或错误。在此处查看有问题的模板/站点：http://xarpixels-revitalize-template.blogspot.com/

仅供参考，只有管理员才能看到 .quickedit 图标。

【问题讨论】：

尝试创建一个fiddle :)
在这里工作正常：jsfiddle.net/j08691/93fsu
.replaceWith( newContent )，文档说。新内容，不是替换项目。这是否意味着您需要选择父母或其他什么？我的意思是，没有任何内容，是一个自闭合标签，所以也许它不起作用...？
@Ariane，意思是替换你选择的元素。 OP 使用了正确的东西。
如果您将该代码放入控制台并运行它会起作用吗？如果是这样，这意味着文档准备就绪不是您想要运行代码的时候。

标签： jquery

【解决方案1】：

您可以尝试其他方式。像这样：

$('a.quickedit img').after('<i class="icon-wrench"></i>').remove();

希望这会有所帮助..

【讨论】：

【解决方案2】：

由于我没有完全理解需求，但在其他人的理解下，我已经修复了代码，请看看这个

Fiddle Demo

css 和 js 代码的变化

$('a.quickedit').append('<i class="icon-wrench"></i>');

标记为正确，如果它解决了您的问题

【讨论】：

追加不是我想要实现的。我想更换。无论如何，我还是尝试了这个，它也没有做任何事情。原始图像仍然存在，我没有在源代码中看到 。所有其他 jQuery 脚本似乎都失败了，console.log 中没有错误。

【解决方案3】：

将此添加到您的 CSS 类中。您需要它，因为标签 i 是一个内联 HTML 元素。看看这个http://jsfiddle.net/r3GgM/

    .icon-wrench{
     ...
    display:block;
    width: xxxx;
    height: nnnn;
    }

【讨论】：

很有趣，但您没有阅读整篇文章。原图还在。 在源中没有任何位置。
我更新了我的jsfiddle.net/r3GgM/7，你的整个代码都很好。也许在您渲染后，Google 会将图像附加到链接中。