Добавить значок к названию класса - PullRequest
Новая
       16

Добавить значок к названию класса

0 голосов
/ 20 марта 2012

У меня есть этот скрипт: JsBin

Позволяет отобразить соответствующий значок для определенного URL.Как вы видите, значок добавляется к URL, однако мне нужно добавить его к class="class" Как я могу это сделать?Я не вижу в коде ничего, что я мог бы изменить, чтобы заставить это работать.

1 Ответ

1 голос
/ 20 марта 2012

Я изменил скрипт, чтобы включить в "config" var a "target" свойство.Эта «цель» - не более чем селектор jQuery (например, в данном случае .class), который по умолчанию равен «this».

Итак: 

jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' }); //aplies to $('.class')

    //These 2 are the same
    jQuery('#hello').favicons({insert: 'insertBefore', target: '#hello' }); //target is the same as "this"
    jQuery('#hello').favicons({insert: 'insertBefore'});

Надеюсь, это сработаетдля вас!

Это полный рабочий код: 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>

<script type="text/javascript">

    jQuery.fn.favicons = function (conf) {
        var config = jQuery.extend({
            insert:        'appendTo',
            target:         this
        }, conf);

        return this.each(function () {
            jQuery('a[href^="http://"]', this).each(function () {
                var link        = jQuery(this);
                var faviconURL    = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';

                var faviconIMG    = jQuery('<img src="' + '" alt="" />')[config.insert]($(config.target));
                var extImg        = new Image();

                extImg.src = faviconURL;

                if (extImg.complete) {
                    faviconIMG.attr('src', faviconURL);
                }
                else {
                    extImg.onload = function () {
                        faviconIMG.attr('src', faviconURL);
                    };
                }
            });
        });
    };

    $(function(){
        jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' });
    });

</script>
</head>
<body>
  <p id="hello"><a href="http://www.google.nl/">Google</a></p>
  <p class="class">apend favicon over her instead</p>
</body>
</html>
...