Question

我想为选定的下拉列表编写我的自定义jquery工具提示代码。下面是我的html代码结构。我想在悬停时显示工具提示？ span标记中的（问号）。我已经编写了jquery代码，但它不起作用。我的问题是如何应用children元素的事件（比如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>

Answer 1

1

Works for me，虽然它会触发两次，因为带有单个参数的.hover会在mouseenter和mouseleave上调用它。 Here's固定版本。

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。

Answer 2

试试这个，

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);
    });
});

在jquery中的children元素上应用事件

2 个答案:

1

2和3

4