将原始高度存储在Jquery鼠标悬停中



我有一个简单的列表,当我滚动li选择器时,我想在具有一类子文本的滚动范围内找到p标记的原始高度。我想把这个值存储在某个地方,这样我就可以在卷展栏方法中使用它。有没有办法把它存储在这个范围内。如果我使用一个全局变量,它可能会在前一个使用它之前被另一个滚动范围更改

我还想知道如何获得选择器文本高度的正确高度。var pheight=$(this,"p.subtext").height();上面的代码并没有阅读全文。它似乎正在读取li标记的高度,在css中该标记被设置为height:50px;

li{
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
list-style-type: none;

}

HTML代码

<body>
<ul>
    <li class="green">
        <div ></div>
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page has more text than any other panel. I want the script to revel different height text.</p>
    </li>
    <li class="yellow">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p><a href="#">Contact</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p><a href="#">Submit</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
    <li class="purple">
        <p><a href="#">Terms</a></p>
        <p class="subtext">Legal stuff</p>
    </li>
</ul>

$("document").ready(function(){
$("li").mouseover(function(){
    var pheight = $(this, "p.subtext").height();
    console.log(pheight);
    $(this).stop().animate({height:150}, {duration: 600, easing: "easeOutExpo"} );
})
$("li").mouseout(function(){
    $(this).stop().animate({height:50}, {duration: 600, easing: "easeOutExpo"} );
})

})

首先,您需要反过来使用选择器——$('p.subtext', this)。更明显的是,使用find:

var pheight = $(this).find('p.subtext').height();

然后,您可以使用data:将数据存储在元素本身上

$(this).data('pheight', pheight);

您可以再次使用datamouseout功能中检索:

$(this).stop().animate({height: $(this).data('pheight')}, {duration: 600, easing: "easeOutExpo"} );
jQuery的data()函数允许您存储与指定元素相关联的任意数据。返回已设置的值。

最新更新