0

わかりました、これが私が現在持っているものです。6 台または 7 台の車のスクロール ギャラリーがあります。車の上にマウスを置くと、小さなウィンドウが車の上に開き、車の情報とフォームが表示されます。これらのウィンドウは、マウスがそれぞれの車の上に置かれたときにトリガーされる非表示の要素です。もう1つのことは、それが1つの要素だけであることです。要素内のデータと要素の位置は、ホバリングされている車に基づいて変化します。それが理にかなっていることを願っています。

私の問題は、非常に長い名前の車がいくつかあることです。ウィンドウは特定の幅と高さであるため、車の名前は 2 行に折り返され、すべてが押し下げられます。ウィンドウの下部からコンテンツを押し出すことになるため、これは問題です。

これは私がスクリプト化しようとしているものです。まず車名を知りたいです。長さが 25 文字を超えているかどうかを確認します。もしそうなら、名前の下の要素の1つを20px上に移動したいと思います。これにより、問題が修正されます。車両の名前の長さに基づいてオブジェクトを移動する方法を知っています。ただし、マウスオーバーでスクリプトを起動する方法がわかりません。ページの先頭でスクリプトを起動しただけでは、マウスが車両の上に移動するまでデータが生成されないため、何もしません。ページの先頭で試してみると、名前の長さvehicle は常に 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>

あなたの考え？？

4

3 に答える 3

0

ライアンはこのようなことを試してください

画像に相対的な非表示要素 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
      } 
});
于 2010-08-02T15:00:53.477 に答える
0

おすすめと考えてください。

jqueryで長さを分析する実験をいくつか行いました（たとえば、静的な幅と高さのdivに最適に収まるようにテキストのフォントサイズを設定するか、画像と表を含むテキストを画面に分割します）、それでもあなたのケースはjavascriptをいじる価値がないと思います. overflow: autoこれは、内部にandfloatと div を含む CSS アートを使用するか、または他の多くの方法で実行できます。

その CSS についてさらにヘルプが必要な場合は、コメントで質問してください。

于 2010-08-02T20:16:17.933 に答える
0

試す：

$('.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'); 
}
});
于 2010-08-02T14:58:59.973 に答える