javascript - 简单的工具提示插件 - onclick 选项不起作用 - jQuery

Question

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

这是 fiddle :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'});
    });

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

Answer 1

您要传递 2 个回调而不是 1 个，您应该这样写:

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


});