Справка JQuery - редактирование скрытого элемента на основе содержимого скрытого элемента

Question

Хорошо, это то, что у меня сейчас есть.У меня есть прокрутка галереи из 6 или 7 машин.Когда вы наводите курсор мыши на автомобиль, появляется небольшое окно над автомобилем, на котором есть информация об автомобиле и форма.Эти окна являются скрытыми элементами, которые срабатывают, когда мышь наводит курсор на соответствующий автомобиль.Другое дело, что это только ОДИН элемент.Данные внутри элемента и положение элемента изменяются в зависимости от того, на какой машине находится автомобиль.Надеюсь, это имеет смысл.

Моя проблема в том, что у меня есть несколько машин с действительно длинными именами.Окно имеет определенную ширину и высоту, поэтому название машины переносится на две строки и отталкивает все вниз.Это проблема, потому что в итоге она выталкивает содержимое из нижней части окна.

Это то, что я пытаюсь написать в сценарии.Я хочу сначала получить название автомобиля.Посмотрите, если это более 25 символов.Если это так, то я хочу переместить один из элементов под именем вверх на 20 пикселей.Это исправит проблему.Я знаю, как перемещать объект, исходя из длины названия транспортного средства;Однако я не знаю, как запустить скрипт при наведении курсора.Если я просто запускаю скрипт в заголовке страницы, он ничего не делает, потому что данные не генерируются, пока мышь не наведет курсор на транспортное средство, поэтому, если я попробую его в заголовке страницы, длина именитранспортное средство всегда будет читать 0 символов.

Любая помощь ???

Объект, на который наведен указатель, - <li class="model-flow-item">
Объект, являющийся скрытым элементом, - <div id="model-rotator-form">

Вот код, с которым я работал:

<script type="text/javascript">
$(window).load(function(){
   if($('#model-rotator-form h2.model-name').text().length > '25'){
      $('#model-rotator-form ul.link-btn').css('margin-top','-20px');
   }
});
</sctipt>

Ваши мысли ??

Answer 1

хорошо, Райан, попробуйте что-то вроде этого

давайте начнем назначать относительный идентификатор скрытого элемента для ваших изображений

, например:

HTML

<img src="mycarpic.jpg" class="yourcarpic" rel='myhiddenelementid'/>

тогда ваш JS

$(".yourcarpic").mouseover(function() {
      var relelement = $(this).attr("rel");
      var charcount = $("#"+relelement).val().length;
      if(charcount>25) { 
          $("#"+relelement).css('margin-top','-20px');
      }
      else {
         //leave as it is or do something
      } 
});

Answer 2

Считайте это рекомендацией.

Я провел несколько экспериментов с анализом длин с помощью jquery (например, установил размер шрифта для текста так, чтобы он лучше всего подходил для статической ширины и высоты, или разделил текст с изображениями и таблицами на экраны), но все же думаю, что ваш случай не стоит возиться с javascript. Это можно сделать с помощью некоторых CSS-артов с overflow: auto и float и div внутри, или несколькими другими способами.

Если вам нужна дополнительная помощь с этим CSS, спросите в комментариях.

Answer 3

попробуй:

$('.model-flow-item').live('hover', function(){
if($('#model-rotator-form h2.model-name').text().length > '25')
{ 
     $('#model-rotator-form ul.link-btn').css('margin-top','-20px'); 
}
});