Блог

Главная - Вопросы по программированию - Сохраняйте исходную высоту в Jquery mouseover

Сохраняйте исходную высоту в Jquery mouseover

#jquery

#jquery

Вопрос:

У меня есть простой список, и когда я переворачиваю селектор li, я хочу найти исходную высоту тега p внутри этой области переноса, которая имеет класс subtext. Я хочу где-нибудь сохранить это значение, чтобы я мог использовать его в методе развертывания. есть ли способ сохранить его в этой области. Если я использую глобальную переменную, она может быть изменена другой областью ролловера до того, как предыдущая сможет ее использовать.

Я также хочу знать, как я могу получить правильную высоту текста селекторов height. var pheight = $(это, «p.подтекст»).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"} );
})

})

Ответ №1:

Во-первых, вам нужно использовать селектор наоборот — $('p.subtext', this) . Более очевидно, использовать find :

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

Затем вы можете сохранить данные о самом элементе с помощью data :

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

Вы можете восстановить ее в mouseout функции с помощью data снова:

 $(this).stop().animate({height: $(this).data('pheight')}, {duration: 600, easing: "easeOutExpo"} );

Комментарии:

1. Спасибо lonesomeday, на сайте Jquery есть пример, подобный этому jQuery.data(document.body, ‘foo’, 52); Элементом является document . тело «foo» — это ключ, а 52 — это значение. Чего я не получаю в приведенном выше примере, так это значения ключа «foo», хранящегося в элементе body или в самом Jquery DOM. В вашем примере: $(this).data(‘pheight’, pheight); значение ключа с именем «pheight» сохраняется в элементе in scope (this) p.subtext. Верно ли это в моем предположении. Если да, то, может быть, вы можете объяснить, почему сайт Jquery использует дополнительный параметр под названием element?

2. @Chapsterj Существует два метода: $(selection).data и $.data . Сначала выполняется выделение jQuery, затем к нему привязываются данные. Второй вариант привязывает данные только к одному элементу, немного менее читаемым способом. Следующие действия идентичны по эффекту: $(this).data('foo', 'bar') и $.data(this, 'foo', 'bar') . Я использовал более читаемую версию выше (и ссылался на нее), хотя $.data она немного быстрее.

Ответ №2:

Функция data() jQuery позволяет сохранять произвольные данные, связанные с указанным элементом. Возвращает значение, которое было установлено.