的style.display的不确定，而元素定义正确

Question

JSFiddle Demo

function toggleFoo() { 
    var btn = $('button'); 

    btn.click(function() { 
     var thisElem = $(this).closest('.parent').find('.children'); 
     console.log(thisElem.length) 
     thisElem.style.display = (thisElem.style.display == 'none') ? 'block' : 'none'; 
    }); 
}; 

$(document).ready(function() { 
    toggleFoo(); 
}); 

为什么我收到undefined试图访问该元素的style.display是正确定义和length可以访问什么时候？

Answer 1

thisElem是jQuery object，而不是一个dom element参考，因此它不具有style财产。

如果你只是想切换元素的显示，那么你可以简单的使用方法.toggle()从jQuery的。

function toggleFoo() { 
 
    var btn = $('button'); 
 

 
    btn.click(function() { 
 
    var thisElem = $(this).closest('.parent').find('.children'); 
 
    console.log(thisElem.length) 
 
    thisElem.toggle(); 
 
    }); 
 
}; 
 

 
$(document).ready(toggleFoo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <button>Click me</button> 
 
    <div class="children"> 
 
    <h2>foo</h2> 
 
    </div> 
 
</div>

如果您要访问的DOM元素，那么你可以说

var thisElem = $(this).closest('.parent').find('.children')[0]; 

Answer 2

请尽量将你的输出：

function toggleFoo() { 
    var btn = $('button'); 

    btn.click(function() { 
     var thisElem = $(this).closest('.parent').find('.children'); 
     var display = (thisElem.css("display") == 'none') ? 'block' : 'none'; 
     thisElem.css("display",display); 
    }); 
}; 

$(document).ready(function() { 
    toggleFoo(); 
}); 

Answer 3

您需要访问DOM得到style财产。

当您使用$(this).closest('.parent').find('.children');结果被包裹在一个jQuery对象。要获得dom元素，请添加您要定位元素的关键字索引。例如[0]在你的情况。

因此：

var thisElem = $(this).closest('.parent').find('.children')[0];