0

我正在使用一个自定义 jQuery 插件，它可以使用脚本创建易于自定义的文本下划线。该插件仅在鼠标悬停事件上创建这些下划线。到目前为止，我已经设法对其进行自定义，以便下划线是永久的并随网页一起加载，但我正在努力在一个网页上创建大量下划线实例，出于某种原因，尽管使用了类，但只有一个下划线可以存在于任何时候。

这是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 网页上调用脚本：

<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 回答