как ссылаться на два разных тега? работа с подсказками!

Question

Я хочу иметь возможность создавать всплывающую подсказку, но используя ссылки из двух разных мест

    this.tooltip = function(){  

        xOffset = 10;
    yOffset = 20;       


    $("div.tooltip").hover(function(e){                                           
        this.t = $("a.tooltip").title;
        $("a.tooltip").title = "";                                    
        $("body").append("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");        
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    }); 
    $("div.tooltip").mousemove(function(e){
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};



// starting the script on page load
$(document).ready(function(){
    tooltip();
});

Это то место, где я хотел работать. У меня есть текст «Перевернитесь для всплывающей подсказки», затем появится окно с надписью «Журнал веб-стандартов».

<div class="tooltip">Roll over for tooltip</div>
<span class="tooltip" title="Web Standards Magazine"></a>

Я знаю, что есть способы, где вы можете иметь это в одной области, как

<span class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

Причина, по которой я этого не делаю, в том, что я работаю над небольшой частью большого файла и не хочу ничего портить.

Я получаю неопределенную переменную. Нужна помощь, пожалуйста, спасибо!

Answer 1

Предполагая, что вы делаете какое-то событие, например hover(), вы можете объединить class элемента, получившего событие, в id-selector ^{[документы]} для выбора соответствующего <div>.

$('img[class^="tooltip"]').hover(function() {
    $('#' + this.className).fadeIn();  // fadeIn, or do whatever with the div
},
  function() {
    $('#' + this.className).fadeOut();  // fadeOut, or do whatever with the div
});

Answer 2

var tooltip = $('#' + this.className).attr('title');

Даст вам tooltip's title, который связан с div, учитывая, что $(this) - это img