Question

好的，这就是我现在所拥有的。我有一个6或7辆汽车的滚动画廊。当你将鼠标悬停在汽车上时，车窗上会打开一个小窗口，上面有车辆信息和表格。这些窗口是隐藏的元素，当鼠标悬停在相应的汽车上时会触发这些元素。另一件事是它只有一个元素。元素内部的数据和元素的位置根据正在徘徊的汽车而变化。希望这是有道理的。

我的问题是我有一些车名很长。窗口是一个特定的宽度和高度，因此汽车的名称包裹两行并向下推动所有东西。这是一个问题，因为它最终会将内容从窗口底部推出。

这就是我想要编写的脚本。我想先得到这辆车的名字。看它是否超过25个字符。如果是，那么我想将名称下面的一个元素移动20px。这将纠正问题。我知道如何根据车辆名称的长度移动物体;但是，我不知道如何在鼠标悬停时触发脚本。如果我只是在页面的头部触发脚本它没有做任何事情，因为直到鼠标悬停在车辆上才生成数据所以如果我在页面的头部尝试它的名称的长度车辆将始终读取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

尝试：

$('.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'); 
}
});

Answer 2

好莱恩尝试这样的事情

让我开始为图片分配相对隐藏的元素ID

例如：

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 3

将其视为推荐。

我做了一些用jquery分析长度的实验（例如，设置文本的字体大小，使其适合静态宽度和高度div最佳或将图像和表格分割成屏幕）但我认为你的情况是不值得搞乱javascript。可以使用overflow: auto和float以及内部div或其他一些方法来完成一些CSS艺术。

如果您想要更多关于CSS的帮助，请在评论中提问。

JQuery帮助 - 根据隐藏元素的内容编辑隐藏元素

3 个答案: