我正在尝试为一个简单的工具提示创建一个 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'});
});
有人可以告诉我我做错了什么吗?
最佳答案
您要传递 2 个回调而不是 1 个,您应该这样写:
$(".tooltip").click(function(){
// check if opened or closed
// then do your stuff ...
});
关于javascript - 简单的工具提示插件 - onclick 选项不起作用 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19561260/