0

スクリプトで簡単にカスタマイズ可能なテキストの下線を作成するカスタム jQuery プラグインを使用しています。プラグインは、マウスオーバー イベントでのみこれらの下線を作成します。これまでのところ、下線が永続的で Web ページに読み込まれるようにカスタマイズできましたが、1 つの Web ページに下線の多数のインスタンスを作成するのに苦労しています。クラスの使用にもかかわらず、何らかの理由で下線が 1 つしか存在できません。いつでも。

これがjQueryです。

(function($){  
$.fn.underline = function(options) {
    var defaults = { 
                    width:       1,
                    distance:    0,
                    color:       '#000',
                    durationOn:  250,
                    durationOff: 250,
                    extend:      2,
                   };

    var options = $.extend(defaults, options);


        $('body').append('<div class="underlineLine"></div>');

          $('.underlineLine')

            var position  = $(this).offset();
            var top       = position.top;
            var left      = position.left;

            var objWidth  = $(this).width();
            var objHeight = $(this).height();


            $('.underlineLine').css({'position'        :'absolute',
                                     'display'         :'none',
                                     'height'          : options.width+'px',
                                     'background-color': options.color,});

            $('.underlineLine').css({'left' : left-options.extend,
                                     'top'  : top+objHeight+options.distance,
                                     'width': objWidth+options.extend*2 })
                               .fadeIn();


};
})(jQuery);

私のphp Webページでのスクリプトの呼び出し：

<script language="JavaScript" type="text/javascript">
   $(document).ready(function() {
        $('.underline a').underline({
            width:           4,                     //default: 1
            distance:        -1,                    //default: 0
            color:           '#66FFB2',     //default: #000
            durationOn:  350,                       //default: 250
            durationOff: 350,                       //default: 250
            extend:          2,                     //default: 2,
    });
    });
</script>

そして単純な HTML 召喚:

<div class="underline"><a href="#">LINK</a></div>
<div class="underline"><a href="#">LINK</a></div>
<div class="underline"><a href="#">LINK</a></div>

誰かがこれについて私を助けるために数分を割くことができれば、私は本当に感謝しています. ありがとう、マット

4

1 に答える 1

1

これですべてのオブジェクトをループする必要がありました

(function($){  
$.fn.underline = function(options) {
    var defaults = { 
                    width:       1,
                    distance:    0,
                    color:       '#000',
                    durationOn:  250,
                    durationOff: 250,
                    extend:      2,
                   };

    var options = $.extend(defaults, options);

    for(i = 0; i < this.length; i++)
    {
        var row = this[i];
        var line = $("<div class=\"underlineLine\"></div>");

        var position  = $(row).offset();
        var top       = position.top;
        var left      = position.left;

        var objWidth  = $(row).width();
        var objHeight = $(row).height();

        $(line).css({'position' :'absolute',
                     'display'         :'none',
                     'height'          : options.width+'px',
                     'background-color': options.color,});

        $(line).css({'left' : left-options.extend,
                     'top'  : top+objHeight+options.distance,
                     'width': objWidth+options.extend*2 }).fadeIn();

        $('body').append(line);
    }
};
})(jQuery);
于 2013-07-23T18:24:26.527 に答える