0

我正在尝试为一个简单的工具提示创建一个 jquery 插件。工具提示可以有 2 个选项，position和trigger， position 为top或bottom和 trigger 为hover或click。悬停部分有效，但点击部分无效，我不知道为什么点击事件不会触发。我应该提一下，这是我的第一个插件，所以我是菜鸟。

这是小提琴：http: //jsfiddle.net/BjZyy/

该插件如下所示：

        (function ($) {
            $.fn.tooltip = function(options){
                var settings = $.extend({
                    position : 'top',
                    trigger  : 'hover'
                }, options);
                var tooltipEl = $(".tooltip-list .tooltip-element");
                return tooltipEl.each(function (){
                    if(settings.trigger == 'hover') {
                        $(".tooltip").hover( function(){
                            $(".tooltip-text", $(this).parent()).show();
                            if(settings.position == 'top') {
                                $(".tooltip-text").addClass("top-position");  
                            }
                            if(settings.position == 'bottom') {
                                $(".tooltip-text").addClass("bottom-position");  
                            }
                        },
                        function () {
                            $(".tooltip-text").hide();
                        });
                    }
                    if (settings.trigger == 'click') {
                        $(".tooltip").click( function(){
                            alert("asdasdasd");
                            $(".tooltip-text", $(this).parent()).show();
                            if(settings.position == 'top') {
                                $(".tooltip-text").addClass("top-position");  
                            }
                            if(settings.position == 'bottom') {
                                $(".tooltip-text").addClass("bottom-position");  
                            }
                        },
                        function () {
                            $(".tooltip-text").hide();
                        });
                    }
                });
            };
        })(jQuery);

这是 HTML：

        <div class="tooltip-list">
            <div class="tooltip-element">
                <a class="tooltip" href="#">Lorem Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Lorem Lorem</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Ipsum Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
        </div>

这是CSS：

    .tooltip {
        position: relative;
    }
    .tooltip-element{
        position: relative;
        padding: 20px;
    }
    .tooltip-text {
        padding: 15px;
        background-color: #fff;
        border: 1px solid black;
        position: absolute;
        display: none;
        width: 40%;
        z-index: 9;
    }
    .top-position{ top: -115px;}
    .bottom-position{ top: 40px;}

这是插件调用：

    $(document).ready(function($) {
        $('.tooltip-element a').tooltip({position : 'top', trigger : 'hover'});
    });

有人可以告诉我我做错了什么吗？

4

1 回答 1

1

你传递了 2 个回调而不是 1 个，你应该写：

$(".tooltip").click(function(){
    // check if opened or closed
    // then do your stuff ...


});
于 2013-10-24T08:55:19.550 回答