Question

我正在使用vTip插件在悬停时显示标题，这是我的示例代码：

我有一个Div＃showTitles，当我点击它时，我想在页面上切换所有div.vtips标题的显示，就像鼠标悬停一样。

$("#showTitles").click(function(){
  // this I am not sure how to acheive.  
  return false;
});

更新 http://jsfiddle.net/bnjSs/2/ 我试过这个，但它没有显示正确的位置作为鼠标悬停，但一旦我鼠标悬停在.vtip然后我点击#showTitles它的工作正常，我还需要切换这种行为：

$("#showTitles").click(function(e,ui){

this.xOffset = 5; 
this.yOffset = 10; 
this.top = (e.pageY + yOffset); 
this.left = (e.pageX + xOffset);

  $('.vtip').each(function(index) {
    title = $(this).text();
    $('body').append( '<p id="vtip"><img id="vtipArrow" />' + title + '</p>' );

        $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
        $('p#vtip').css("top", this.top+"px").css("left",  
   this.left+"px").fadeIn("slow");

 });
   return false;
 });

感谢您的帮助。

Answer 1

ID应该是唯一的。^已完成
我修改了您当前的代码，使其在当前条件下工作。由于描述性名称，功能逻辑应该是显而易见的。 小提琴：http://jsfiddle.net/bnjSs/7/

更新：根据评论的要求，在代码中添加了显示/隐藏文字+功能 Update2：关注整个代码，提高效率。

你过度使用this。 this.xOffset = 5将xOffset附加到元素上。使用var xOffset = 5在函数范围内定义xOffset。以下代码具有以下范围模型：

$(document).ready(function(){
   // Variables defined using `var` can be read by
   //   any function defined within this function
   function vtip(){
      // variables declared here can be read by any function defined inside vtip
      // but cannot be read by methods outside vtip
      function(){..} at .hover and .mousemove
         // These functions also have an own scope, and variables defined using
         // var cannot be read by anything outside these functions, even at vtip
   $("#showTitles").click(function(e){
      // variables declared here cannot be read by code outside this function
      // This function can read any variable which is declared using var at
      // $(document).ready

注意：“声明”表示“使用var定义”。

最终代码：

// Run when the DOM is ready
//Note: $(function(){ is short for  $(document).ready(function(){
$(function(){
    var xOffset = 5; // x distance from mouse
    var yOffset = 10; // y distance from mouse
    var frozen_vtip = false; //Define it
    var vtip = function() {    

        $(".displaytip").unbind().hover(    
            function(e) {
                if(frozen_vtip) return;
                this.t = this.title;
                this.title = '';
                var top = (e.pageY + yOffset);
                var left = (e.pageX + xOffset);

                $('<p class="vtip"><img class="vtipArrow" src=""/>' + this.t + '</p>').css("top", top+"px").css("left", left+"px").fadeIn("slow").appendTo(this);

            },
            function() {
                if(frozen_vtip) return;
                this.title = this.t;
                $("p.vtip", this).fadeOut("slow").remove();
            }
        ).mousemove(
            function(e) {
                if(frozen_vtip) return;
                var top = (e.pageY + yOffset);
                var left = (e.pageX + xOffset);

                $("p.vtip", this).css("top", top+"px").css("left", left+"px");
            }
        );  
    };
    vtip();


// Second function, when text is "Hide titles" it should
// prevent runing vtip() on mouseover (above function) and
// when text is  "Show titles" It should normally run vtip()
// (mouseover display title.

    $("#showTitles").click(function(e){
        e.preventDefault();
        if($(this).text() == "Hide titles"){
            $(this).text("Show titles");
            $('p.vtip').fadeOut("slow").remove();
            $('.displaytip').each(function(){
                this.title = this.t; //Re-attach `title`
            });
            frozen_vtip = false;
        } else {
            frozen_vtip = true;
            $(this).text("Hide titles");
            $('.displaytip').each(function(index) {
                if($('p.vtip', this).length) {return;}
                this.t = this.title;
                this.title = '';   
                var $this = $(this);
                var offset = $this.offset();
                var height = $this.height();
                var top = offset.top + height;
                var left = offset.left + height;
                $('<p class="vtip"><img class="vtipArrow" src="images/vtip_arrow.png" />' + this.t + '</p>' ).appendTo(this).css("top", top+"px").css("left", left+"px").fadeIn("slow");
            });
        }
    });
});

vtip jQuery来显示标题

1 个答案: