1

Web サイトに凡例システムを作成しようとしています.これは簡単な作業です.マウスが要素の上にあると、jquery はvalue属性を取得し、この値を以下に追加しdivます...

選択が3つの要素を返すため、属性を取得する方法がわかりません...コードは次のとおりです..

$(function(){
$('#legends .item')
    .mouseover(function(){
            $('#legend-tags').html($('#tag-video').attr("value")).fadeIn();
        })
    .mouseout(function(){   
            $('#legend-tags').fadeOut();
        });
});

この選択は 3 つの要素を返します。現在マウス オーバーしている要素の属性を取得したいと考えています。このテスト コードで#tag-videoは、要素の 1 つである の属性を取得しています。

HTMLは次のとおりです。

<div id="legends">
  <span>TAGS</span>
  <div id="tag-motion" class="item tag-motion" value="motion"></div>
  <div id="tag-design" class="item tag-design" value="design"></div>
  <div id="tag-video" class="item tag-video" value="video"></div>
  <div id="legend-tags">legend</div>                
</div>

CSS は次のとおりです。

#legends .item
{
    display: block;
    width: 27px;
    height: 27px;
    cursor: pointer;
    margin-bottom: 5px;    
}

#legend-tags
{
    display: none;
}

.tag-video
{
    background-image: url('../img/tag-video.svg');
}

.tag-video:hover
{
    background-image: url('../img/tag-video-over.svg');
}

.tag-design
{
    background-image: url('../img/tag-design.svg');
}

.tag-design:hover
{
    background-image: url('../img/tag-design-over.svg');
}

.tag-motion
{
    background-image: url('../img/tag-motion.svg');
}

.tag-motion:hover
{
    background-image: url('../img/tag-motion-over.svg');
}
4

2 に答える 2

4

使用する必要があります

$('#legend-tags').html($(this).attr("value")).fadeIn();

デモ:フィドル

あなたの場合$('#tag-video')、マウスが置かれている要素を取得する必要があるのではなく、ハードコーディングしました。この要素は、ホバーコールバックでthis変数として利用できます。

注：セレクターにはタイプがあり$('#legends .iten')ます$('#legends .item')

于 2013-03-29T02:17:05.353 に答える
0

このようなものは機能しますか？

$("div.item").hover(function(){
    $('#legend-tags').html( $(this).attr("value") ).fadeIn();
});
于 2013-03-29T02:20:36.047 に答える