javascript - 如何获取此元素的文本而不是子元素

Question

当我将鼠标悬停在topblock上时，我只想隐藏文本First Text，使用(opacity:0)。

<div class="topblock">
   First Text
   <div class="block">
      Inner Text
   </div>
</div>

但是当我使用下面的 jQuery 代码时，我也得到了子 DIV 文本 First Text Inner Text

$(".topblock").on("mouseenter",function(){
    console.log($(this).text());
    $(this).css({"opacity":"0"})
}).on("mouseleave",function(){

});

Answer 1

要在不修改 HTML 结构的情况下完成所需的操作将异常困难，因为您需要修改直接保存 First text 值的 textNode。

相反，只需修改 HTML 将该文本包装在另一个元素(例如 span)中，然后在该元素上执行操作就会简单得多。试试这个:

<div class="topblock">
   <span>First Text</span>
   <div class="block">
      Inner Text
   </div>
</div>

$(".topblock").on("hover",function(){
    $(this).find('span').toggle();
});