首页 > php > 如何从mouseenter函数获取div的id?

如何从mouseenter函数获取div的id? (How to get the id of a div from mouseenter function?)

问题

我需要在这个jquery code.i尝试$ this.attr('id)获取productbox div的id,但结果是object object或undefined.how我可以获得productbox div的id吗?提前致谢

使用Javascript:

$('body').on('mouseenter', 'div.productbox', function() 
{
    buttonDiv = $(this).children('div.roll');
    myTimeout = setTimeout(function() 
    {
        Divid = ?;
        buttonDiv.toggle();
    }, 500);
});

$('body').on('mouseleave', 'div.productbox', function() 
{
    buttonDiv.hide();
    clearTimeout(myTimeout);
});

$('body').on('hover', 'div.productbox', function() 
{
    var buttonDiv = $(this).children('div.roll1');
    buttonDiv.toggle();
});   

HTML:

<div id="40" class="productbox">
    <span class="new">Yeni</span>
    <div class="roll" style="display: none;">
        <input type="button" value="139"> Like <input type="button" value="34"> Comment
    </div>
    <div class="productpicture" onclick="rload(40)">
        <img style="margin:auto; width:180px;overflow:hidden;display:block"  src="pictures/40.jpg">
    </div>
    <div class="ps">
        <div class="productname">Giysi</div>
        <div class="companyname" onclick="go('2');">Koton</div>
        <div class="price">9.99 TL</div>
    </div>
</div>

解决方法

你可以利用这样的闭包:

<script type="text/javascript">
    $('body').on('mouseenter', 'div.productbox', function()
    {
        var $productBox = $( this );
        buttonDiv = $productBox.children('div.roll');
        myTimeout = setTimeout(function ()
        {
            Divid = $productBox.attr('id');
            buttonDiv.toggle();
        }, 500);
    });
    $('body').on('mouseleave', 'div.productbox', function ()
    {
        buttonDiv.hide();
        clearTimeout(myTimeout);
    });
    $('body').on('hover', 'div.productbox', function ()
    {
        var buttonDiv = $(this).children('div.roll1');
        buttonDiv.toggle();
    });
</script>

<div id="40" class="productbox">
    <span class="new">Yeni</span>
    <div class="roll" style="display: none;">
        <input type="button" value="139">
        Like
        <input type="button" value="34">
        Comment
    </div>
    <div class="productpicture" onclick="rload(40)">
        <img style="margin:auto; width:180px;overflow:hidden;display:block"  src="pictures/40.jpg">
    </div>
    <div class="ps">
        <div class="productname">Giysi</div>
        <div class="companyname" onclick="go('2');">Koton</div>
        <div class="price">9.99 TL</div>
    </div>
</div>

问题

I need to get the id of the productbox div in this jquery code.i tried $this.attr('id) but the result is object object or undefined.how can i get the id of productbox div? thanks in advance

Javascript:

$('body').on('mouseenter', 'div.productbox', function() 
{
    buttonDiv = $(this).children('div.roll');
    myTimeout = setTimeout(function() 
    {
        Divid = ?;
        buttonDiv.toggle();
    }, 500);
});

$('body').on('mouseleave', 'div.productbox', function() 
{
    buttonDiv.hide();
    clearTimeout(myTimeout);
});

$('body').on('hover', 'div.productbox', function() 
{
    var buttonDiv = $(this).children('div.roll1');
    buttonDiv.toggle();
});   

HTML:

<div id="40" class="productbox">
    <span class="new">Yeni</span>
    <div class="roll" style="display: none;">
        <input type="button" value="139"> Like <input type="button" value="34"> Comment
    </div>
    <div class="productpicture" onclick="rload(40)">
        <img style="margin:auto; width:180px;overflow:hidden;display:block"  src="pictures/40.jpg">
    </div>
    <div class="ps">
        <div class="productname">Giysi</div>
        <div class="companyname" onclick="go('2');">Koton</div>
        <div class="price">9.99 TL</div>
    </div>
</div>

解决方法

You can take advantage of closure like this:

<script type="text/javascript">
    $('body').on('mouseenter', 'div.productbox', function()
    {
        var $productBox = $( this );
        buttonDiv = $productBox.children('div.roll');
        myTimeout = setTimeout(function ()
        {
            Divid = $productBox.attr('id');
            buttonDiv.toggle();
        }, 500);
    });
    $('body').on('mouseleave', 'div.productbox', function ()
    {
        buttonDiv.hide();
        clearTimeout(myTimeout);
    });
    $('body').on('hover', 'div.productbox', function ()
    {
        var buttonDiv = $(this).children('div.roll1');
        buttonDiv.toggle();
    });
</script>

<div id="40" class="productbox">
    <span class="new">Yeni</span>
    <div class="roll" style="display: none;">
        <input type="button" value="139">
        Like
        <input type="button" value="34">
        Comment
    </div>
    <div class="productpicture" onclick="rload(40)">
        <img style="margin:auto; width:180px;overflow:hidden;display:block"  src="pictures/40.jpg">
    </div>
    <div class="ps">
        <div class="productname">Giysi</div>
        <div class="companyname" onclick="go('2');">Koton</div>
        <div class="price">9.99 TL</div>
    </div>
</div>
相似信息