4

グリッド内に ~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>

これをつかむ方法はまだ見つかっていないようです。ヒントや代替案は役に立ちます！

デモはこちら

4

7 に答える 7

9

これを試して：

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

500 個の要素があるため、単一の委任ハンドラーを使用してパフォーマンスを向上させることができます。最初に要素を含むにラップしますdiv:

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

次にjQueryで：

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

これにより、潜在的に 500 個のイベント ハンドラーではなく、1 個の要素がイベント ハンドラーを持つことになります。

于 2013-08-28T13:24:59.573 に答える
1

これがjsfiddleでの問題の解決策です

以下はコードです

$('a').mouseover(function(){
    alert($(this).prop('title'));
});
于 2013-08-28T13:27:19.150 に答える
0 
$("a:hover").mouseenter(function(){
   var _title = $(this).attr("title"); // Why prefix with an anchor? Maybe you need to replace....
   console.log(_title);
});
于 2013-08-28T13:31:30.027 に答える
0

ここにきれいな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>

脚本

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

CSS

.color{height: 30px; width: 30px;display:block;}
.container{width:50%;margin:0 auto;}
于 2013-08-28T13:42:24.113 に答える