jQuery帮助-根据隐藏元素的内容编辑隐藏元素答案

【问题标题】：JQuery help - editing a hidden element based on content of hidden elementjQuery帮助-根据隐藏元素的内容编辑隐藏元素
【发布时间】：2010-08-02 14:51:48
【问题描述】：

好的，这就是我目前拥有的。我有一个 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>

你的想法？？

【问题讨论】：

请展示您的代码，它会在
中填写有关悬停事件的信息

标签： jquery mouseover hidden-field

【解决方案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'); 
}
});

【讨论】：

【解决方案2】：

Ryan 试试这样的方法

让我开始为您的图像分配一个相对隐藏的元素 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
      } 
});

【讨论】：

【解决方案3】：

将其视为建议。

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

如果您需要有关该 CSS 的更多帮助，请在 cmets 中询问。

【讨论】：