如何获得当前锚的标题属性?

Have ~500 anchor tags in a grid that all have title attributes, I would like to get that title from the element the user is currently hovering, and display it at the top of the grid so you can tell what you are hovering over. Or, is there an alternative?

在一个网格中有大约500个锚标记，它们都有标题属性，我希望从用户当前悬停的元素中获得标题，并将其显示在网格的顶部，这样您就可以知道悬停的是什么。或者，还有其他选择吗?

<a class="color" title="#Wicked" style="height: 30px; width: 30px; background-color: rgb(70, 60, 65); display: block;"></a>
<a class="color" title="#Tallulah" style="height: 30px; width: 30px; background-color: rgb(95, 58, 61); display: block;"></a>
<a class="color" title="#Merlot" style="height: 30px; width: 30px; background-color: rgb(79, 56, 57); display: block;"></a>
<a class="color" title="#Speakeasy" style="height: 30px; width: 30px; background-color: rgb(87, 50, 65); display: block;"></a>
<a class="color" title="#Tamarind" style="height: 30px; width: 30px; background-color: rgb(95, 68, 74); display: block;"></a>
<a class="color" title="#Oxford" style="height: 30px; width: 30px; background-color: rgb(101, 64, 60); display: block;"></a>
<a class="color" title="#Mulberry" style="height: 30px; width: 30px; background-color: rgb(111, 70, 83); display: block;"></a>
<a class="color" title="#Crantini" style="height: 30px; width: 30px; background-color: rgb(128, 81, 87); display: block;"></a>
<a class="color" title="#Sangria" style="height: 30px; width: 30px; background-color: rgb(121, 87, 90); display: block;"></a>
<a class="color" title="#Pueblo" style="height: 30px; width: 30px; background-color: rgb(141, 108, 109); display: block;"></a>
<a class="color" title="#Bel Ange Rose" style="height: 30px; width: 30px; background-color: rgb(167, 123, 127); display: block;"></a>
<a class="color" title="#Foxglove" style="height: 30px; width: 30px; background-color: rgb(200, 143, 120); display: block;"></a>
<a class="color" title="#Cactus Bloom" style="height: 30px; width: 30px; background-color: rgb(230, 191, 164); display: block;"></a>
<a class="color" title="#Pillow Talk" style="height: 30px; width: 30px; background-color: rgb(240, 221, 211); display: block;"></a>

Can't seem to find any way to grab this, yet. Any tips or alternatives helpful!

看来还没找到抓住这个机会的办法。任何提示或选择都是有用的!

Demo Here

演示

7 个解决方案

#1

Adding to what's already been posted here, you should move as much style information into CSS as possible. Taking @Rory McCrossan suggestion, if you put the whole thing inside of a container, then we can use that to style just the color elements with the following css

在这里添加已经发布的内容之后，您应该将尽可能多的样式信息移动到CSS中。根据@Rory McCrossan的建议，如果你把所有的东西都放在一个容器中，那么我们就可以用下面的css来样式化颜色元素

#colors a {
    height: 30px;
    width: 30px;
    display: block;
}

Then our HTML should look like this:

那么我们的HTML应该是这样的:

<div id='currentColor'>Color: </div>
<div id='colors'>
    <a title="Wicked" style="background-color: rgb(70, 60, 65);"/>
    <!-- more colors -->
</div>

We can do the rest with js/jQuery.

我们可以使用js/jQuery来完成剩下的工作。

$('#colors').on({
    mouseenter: function () {
        $('#currentColor').text("Color: " + this.title);
    },
    mouseleave: function () {
        $('#currentColor').text("Color: ");
    }
}, 'a');

This code uses jQuery's on method to attach a delegated handler to mouseenter and mouseleave events for all a elements inside the #colors container.

这段代码使用jQuery的on方法将委托处理程序附加到mouseenter和mouseleave事件，用于#colors容器中的所有元素。

See this demo:

看到这个演示:

jsFiddle

#2

Try this:

试试这个:

$('.color').mouseover(function() {
    var title = this.title;
    // do something with title...
});

---

As you have 500 elements, you could use a single delegated handler to improve performance. Firstly wrap your elements in a containing div:

由于您有500个元素，您可以使用一个委托处理程序来提高性能。首先将您的元素包含在一个div中:

<div id="container">
    <!-- your current code here -->
</div>

Then in jQuery:

然后在jQuery:

$('#container').on('mouseover', '.color', function() {
    var title = this.title;
    console.log(title);
});

This will result in 1 element having an event handler instead of potentially 500.

这将导致一个元素有一个事件处理程序，而不是可能有500个。

#3

here is the solution to your problem on jsfiddle

这是对jsfiddle问题的解决方案

and below is the code

下面是代码

$('a').mouseover(function(){
    alert($(this).prop('title'));
});

#4

You can simply use the following code:

您可以简单地使用以下代码:

$('.color').hover(function(){

var title = $(this).attr("title");    

});

#5

$("a:hover").mouseenter(function(){
   var _title = $(this).attr("title"); // Why prefix with an anchor? Maybe you need to replace....
   console.log(_title);
});

#6

Here is cleaned Html,Css and Script Jsfiddle Here

这里是经过清理的Html、Css和脚本Jsfiddle

<div class="container">
<a class="color" title="#Wicked" style=" background-color: rgb(70, 60, 65); "></a>
<a class="color" title="#Tallulah" style=" background-color: rgb(95, 58, 61); "></a>
<a class="color" title="#Merlot" style=" background-color: rgb(79, 56, 57); "></a>
<a class="color" title="#Speakeasy" style=" background-color: rgb(87, 50, 65); "></a>
<a class="color" title="#Tamarind" style=" background-color: rgb(95, 68, 74); "></a>
<a class="color" title="#Oxford" style=" background-color: rgb(101, 64, 60); "></a>
<a class="color" title="#Mulberry" style=" background-color: rgb(111, 70, 83); "></a>
<a class="color" title="#Crantini" style=" background-color: rgb(128, 81, 87); "></a>
<a class="color" title="#Sangria" style=" background-color: rgb(121, 87, 90); "></a>
<a class="color" title="#Pueblo" style=" background-color: rgb(141, 108, 109); "></a>
<a class="color" title="#Bel Ange Rose" style=" background-color: rgb(167, 123, 127); "></a>
<a class="color" title="#Foxglove" style=" background-color: rgb(200, 143, 120); "></a>
<a class="color" title="#Cactus Bloom" style=" background-color: rgb(230, 191, 164); "></a>
<a class="color" title="#Pillow Talk" style=" background-color: rgb(240, 221, 211); "></a>
</div>

Script

脚本

 $('.color').on('mouseenter',function() {
        alert(this.title);
    });

Css

Css

.color{height: 30px; width: 30px;display:block;}
.container{width:50%;margin:0 auto;}

#7

Bootstrap has some pretty sweet looking tooltips: http://getbootstrap.com/javascript/#tooltips

Bootstrap有一些非常漂亮的工具提示:http://getbootstrap.com/javascript/#tooltips

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script>
        $('a').tooltip();
    </script>

Demo http://jsfiddle.net/wernull/fEzsy/

演示http://jsfiddle.net/wernull/fEzsy/