的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];