0

選択したドロップダウン リストのカスタム jquery ツールチップ コードを記述したいと考えています。以下は私の html コード構造です。(クエスチョン マーク) スパン タグで。私はjqueryコードを書いていますが、うまくいきません。私の質問は、子要素のイベントをどのように適用するかです(divのspan子など)。私はすでにjqueryコードの下で試しましたが、うまくいきません。

ajax を使用して、ページの読み込み時にドロップダウンを埋めます。

Javascript コード 

$(document).ready(function(){

    // first code not working

    $('#sub_cat_tooltip').hover(function(){
        alert("Title :"+$("#subcat option:selected").attr( "title"));
    });

    // second code not working

    $('#subcatdrp p #sub_cat_tooltip').hover(function(){
        alert("Title :"+$("#subcat option:selected").attr( "title"));
    });

    // third code not working

    $('#subcatdrp > p > #sub_cat_tooltip').hover(function(){
        alert("Title :"+$("#subcat option:selected").attr( "title"));
    }); 

    // fourth 
    // try all above try using onmouseover event

    $('#sub_cat_tooltip').onmouseover(function(){
        alert("Title :"+$("#subcat option:selected").attr( "title"));
    });
});

HTMLコード

<div id="subcatdrp">
    <p>
        <label for="subcategory">Sub Category:</label>
        <select id="subcat" name="subcat">
        </select>
    </p>
    <span id="sub_cat_tooltip" class="tooltip_img">?</span> 
</div>
4

2 に答える 2

0

このようにしてみて、

HTMLコード

<div>
    <p>
        <label for="subcategory1">Sub Category:</label>
        <select name="subcategory1" title="This is title 1!">
        </select>
    </p>
    <span class="tooltip_img">?</span> 
</div>

<div>
    <p>
        <label for="subcategory2">Sub Category:</label>
        <select name="subcategory2" title="This is title 2!">
        </select>
    </p>
    <span class="tooltip_img">?</span> 
</div>

jQuery コード

$(document).ready(function() {
    $('.tooltip_img').mouseover(function() {
        var $alert = $(this).parent().find('select').attr('title');
        alert($alert);
    });
});
于 2012-07-06T12:00:02.933 に答える
0

1

.hover1つの引数でmouseenterとmouseleaveで呼び出すため、2回起動しますが、私にとっては機能します。こちらが修正版です。

2と3

$('#subcatdrp p #sub_cat_tooltip')$('#subcatdrp > p > #sub_cat_tooltip')次の HTML を探すため、機能しません。

<... id="subcatdrp">
    <p>
         <... id="sub_cat_tooltip" /> 
    </p>
</...>

あなたのツールチップはpの中にありません。

4

onmouseoverjQueryには存在しないため動作しません。を探してい.mouseenterます。

于 2012-07-06T11:57:25.540 に答える