Question

Google Blogger使用javascript在小部件或可编辑区域上为管理员添加quickedit图标。

这是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图标。

Answer 1

您可以尝试替代方式。像这样：

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

希望这会有所帮助..

Answer 2

由于我完全不了解要求，但与其他人理解，我已经修复了代码，请看看这个

Fiddle Demo

更改css和js代码

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

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

Answer 3

在CSS课程中添加此项。你需要它，因为标签i是内联HTML元素。看看http://jsfiddle.net/r3GgM/

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

jQuery .replaceWith不工作

3 个答案: