3

私は画像ローテーターを備えたサイトで作業しています(jQuery Roundaboutを使用)。jQueryで、画像をクリックすると、次のコードを使用してその画像に関連付けられた特定のコンテンツが表示されるように設定しました。

  $('#brand-cou').click(function() {
    $('#brand-details .detail-section').fadeOut(0);
    $('#detail-country-squire').fadeIn("slow");
    return false;
  });

ここで、#brand-couは画像を含むliであり、#detail-country-squireは表示したいセクションです。これはうまく機能します。次と前の矢印もあると思います。これは、画像ローテーター内を移動するための代替方法です。これらのコントロールを使用してローテーターの周りを進むときに適切なテキストを表示するのに最も苦労しています。これは私が今持っているコードです:

  $('a#next').click(function() {
    if ('li'.id = 'brand-cou' && 'li'.hasClass('roundabout-in-focus') {
      //Do what I need to do
    }
  });

画像が正面画像の場合、クラス「.roundabout-in-focus」を自動的に受け取ります。私の考えでは、特定の画像ごとにifステートメントを使用して、その画像にAのIDと.roundabout-in-focusのクラスがあるかどうかを示し、Aの特定のテキストを表示できると考えました。何らかの理由でこれは機能していません。また、画像ごとに上記のすべてのコードと、次のセクションと同様の前のボタンセクションが必要になるため、これもかなり時間がかかるようです。したがって、短期的には、上記のifステートメントが機能しない理由を理解するための助けが必要です。誰かが本当に寛大だと感じているなら、私はこのコードを凝縮する方法についての人々の考えの助けが欲しいです。liがこの特定のIDとラウンドアバウトの焦点のクラスの両方を持っているとしたら、次に、このテキストを表示します(画像をクリックするか、次/前のボタンをクリックしても機能するはずです)。私の唯一の問題は、クリック機能など、3つのオプションすべてを網羅するには具体的すぎるものにリンクせずにこれを作成する方法です。

助けてくれてありがとう!

4

1 に答える 1

0

@JapanPro、そうですね。ここにhtmlがあります。これは役に立ちますか?:

<ul id="thumbs-brands">
  <li id="brand-qua"><a href="#"><img src="../assets/brand-quality-care.png"></a></li>
  <li id="brand-pro"><a href="#"><img src="../assets/brand-propet.png"></a></li>
  <li id="brand-cou"><a href="#"><img src="../assets/brand-country-squire.png"></a></li>
  <li id="brand-big"><a href="#"><img src="../assets/brand-big-red.png"></a></li>
  <li id="brand-lil"><a href="#"><img src="../assets/brand-lil-red.png"></a></li>
  <li id="brand-joy"><a href="#"><img src="../assets/brand-joy.png"></a></li>
  <li id="brand-joypro"><a href="#"><img src="../assets/brand-joy-professional.png"></a></li>
  <li id="brand-sma"><a href="#"><img src="../assets/brand-small-animal.png"></a></li>
</ul> <!-- end of thumbs-brands -->

<div id="thumb-navigation">
  <a href="#" id="next">Next</a>
  <a href="#" id="previous">Previous</a>
</div>        

<div id="brand-details">
    <div id="detail-country-squire" class="detail-section">
          //Content Here
    </div> <!-- end of .detail-body -->
</div> <!-- end of detail-pro-pet -->
于 2010-09-02T13:56:40.070 に答える