Javascript / Jquery：如何修改此脚本以避免必须使用<A>标签？</a>

Question

One of the issues I have with this script is that I have to have a link tag to get the rel from it. I am looking at doing descriptions when user mouseover's a table row.

What I need: If TD has desc , append text. <td desc="blah blah blah">

 this.screenshotPreview = function () {
     xOffset = 20;
     yOffset = 30;

     $("tr:has(a[desc])").hover(function (e) {
         var text = $(this).find('a').attr('desc');
         $("body").append("<p id='screenshot'>" + text + "</p>");
         $("#screenshot")
             .css("top", (e.pageY - yOffset) + "px")
             .css("left", (e.pageX + xOffset) + "px")
             .fadeIn("fast");
     },function () {
         this.title = this.t;
         $("#screenshot").remove();
     });
     $("a.screenshot").mousemove(function (e) {
         $("#screenshot")
             .css("top", (e.pageY - yOffset) + "px")
             .css("left", (e.pageX + xOffset) + "px");
     });
 };


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

JSFIDDLE: http://jsfiddle.net/zD99p/1/ (in jsfiddle, it still uses rel instead of desc . You can code it either way, I can change that with no problem)

Answer 1

You can use data- attributes:

http://jsfiddle.net/MWkXJ/

<td data-desc="..."></td>

---

$("td[data-desc]").hover(function (e) {
     var text = $(this).data('desc');
     //...

Answer 2

Maybe something like this:

...
 $("td[desc]").hover(function (e) {
     var text = $(this).attr('desc');
     $("body").append("<p id='screenshot'>" + text + "</p>");
...

And change html to this:

<td desc="blah blah">content ...

http://jsfiddle.net/6yMNM/

Answer 3

in your JSFIDDLE you missed a closing </a> . I changed that and changed the <a> to a <div> and it worked. look here .