0

我想为选定的下拉列表编写我的自定义 jquery 工具提示代码。下面是我的 html 代码结构。我想在悬停时显示工具提示？（问号）在 span 标签中。我已经编写了 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

1

对我有用，虽然它会触发两次，因为.hover只有一个参数会在 mouseenter 和 mouseleave 上调用它。这是一个固定版本。

2 和 3

$('#subcatdrp p #sub_cat_tooltip')并且$('#subcatdrp > p > #sub_cat_tooltip')不工作，因为他们寻找这个 HTML：

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

您的工具提示不在 p 内。

4

onmouseover不起作用，因为它在 jQuery 中不存在。你正在寻找.mouseenter.

于 2012-07-06T11:57:25.540 回答
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 回答