Question

我需要在这个jquery代码中获取productbox div的id。我试过$ this.attr（'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>

Answer 1

你可以利用这样的闭包：

<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>

Answer 2

你需要这样做：

$('body').on('mouseenter', 'div.productbox', function() {
    myTimeout = setTimeout((function(self) {
        return function() {
            buttonDiv = $(self).children('div.roll');
            Divid= $(self).attr("id");
            console.log(Divid);
            buttonDiv.toggle();
        }
    })(this), 500);
});

检查JSFiddle是否有完整的工作代码：http://jsfiddle.net/kBRyu/2/

Answer 3

您获得“未定义”等原因是因为您实际上是在请求窗口获取其ID。

您需要做的是为div声明一个局部变量，然后在超时内使用该变量来获取ID。

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

如何从mouseenter函数获取div的id？

3 个答案: