1

私は次のjqueryコードを持っています。

基本的に、いくつかの重複した div と、それらすべての重複した div の右側にあるリンクのリストがあります。リンクにカーソルを合わせると、リンクに割り当てられた div がフェードインします。

私は次のコードを持っていますが、それは機能します (デフォルトのウィンドウのサンプル画像を使用しています) が、誰かがそれを最適化する方法や一般的なものにする方法を考えることができれば、私はそれを感謝します.

<html>
<head>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>

    <script type="text/javascript">
       $(document).ready(function() {

          $("#trigger1").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divsunset").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divsunset").fadeIn(500);
          });


          $("#trigger2").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divwinter").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divwinter").fadeIn(500);

          });

          $("#trigger3").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divbh").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divbh").fadeIn(500);

          });

          $("#trigger4").mouseover(function() {

            $(".contentdiv").addClass("inactive");
            $("#divwl").removeClass("inactive");
            $(".inactive").fadeOut(500);
            $("#divwl").fadeIn(500);

          });

        });

    </script>


    <style>
        #divsunset
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divwinter
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divbh
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #divwl
        {
          position: absolute;
          top: 5px;
          left: 5px;
        }
        #links
        {
          position: absolute;
          top: 800px;
          left: 700px;
        }
        .inactive
        {
        }
    </style>
</head>
<body>

<div id="divsunset" class="contentdiv">
    <img src="Sunset.jpg" />
</div>

<div id="divwinter" class="contentdiv">
    <img src="Winter.jpg" />
</div>

<div id="divbh" class="contentdiv">
    <img src="bh.jpg" />
</div>


<div id="divwl" class="contentdiv">
    <img src="wl.jpg" />
</div>



<br />
<div id="links">
    <a href="#" id="trigger1">Show Sunset</a>
    <a href="#" id="trigger2">Show Winter</a>
    <a href="#" id="trigger3">Show Blue Hills</a>
    <a href="#" id="trigger4">Show Waterlillies</a>
</div>

</body>
</html>

Matt、TM、kRON に感謝します。あなたの回答は本当に役に立ちました。

自分自身を完全に説明したとは思いませんが、TM は私が探していた答えを提供してくれました。

私は DRY に従いたかったのですが、マークアップを変更する必要がなく、jQuery コードだけだったので、今回は TM が提供したコードが最も役に立ちました。

繰り返しますが、どうもありがとうございました。驚くべきことに、私はすぐに答えを得ました。これからもいい結果を出し続けてください。

4

3 に答える 3

6

最初にできることは、それらの同様の呼び出しをより一般的なものに置き換えることです。

（注：これはすべて の中にあると仮定しますdocument.ready()）

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

コンマ区切りのセレクターを使用することは、jQuery で DRY に従う優れた方法です。

要素のいくつかのデータを設定および取得するために使用$(element).data()します。この場合、適切な要素を更新するために使用されるセレクターです。

また、見栄えを良くするために、必要に応じて の代わりに次のものを使用できます$(document).ready()。構文が異なるだけで、まったく同じです。

$(function() {
   //DOM ready
};
于 2008-12-09T18:52:34.380 に答える
1

数か月前に同様の質問に答えましたjQuery Swapping Elementsが役立つ場合。

マット

明確化、{id:'1'} を取得した場合は、表示する div の id を交換し、他の DIV で汎用クラス名を作成してそれらを非表示にする必要があります。

複数のクラスを要素に適用できることを思い出してください。

<Div class="name1 name2"></div>

これは、元の div にスタイル ルールが関連付けられている場合に役立ちます。

于 2008-12-09T19:06:24.850 に答える
0

それは良いことですが、割り当てた ID に対してより一般的なアプローチが必要になります。

頭に浮かぶ最も簡単な解決策は、親 div "#wrapped" の下でフェードインする重複した div をラップすることです。すべてのリンクを取得し、CSS クラス 'trigger NAME' を割り当てます。ここで、'NAME' は 'Sunset, 'Winter' などです。次に、次のようなことができます。


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

これは最善の解決策ではありませんが、アイデアが得られることを願っています。

于 2008-12-09T19:01:23.613 に答える