jQueryのは - 皮を作ることは、すべての/より一般的なこのdivのイメージを表示します

StackOverflow https://stackoverflow.com/questions/353772

  •  20-08-2019
  •  | 
  •  

質問

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

は、基本的に私は、いくつか重なってdiv要素とそれらのすべての重複したdivの右側のリンクのリストを持っています。リンクの上にマウスを移動する場合、リンクに割り当てられたdivがフェードインされます。

私は、次のコードを持っており、それが動作します（これはデフォルトのWindowsのサンプル画像を使用しています）、誰かがそれを最適化するか、それが一般的なようにする方法を考えることができれば、私はそれをいただければと思います。

<html>

    

<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>

                   


    ショーサンセット     ショー冬     ショーブルーヒルズ     ショーWaterlillies

<時間>

マット、TMとKRONは、あなたの回答が本当に助け、ありがとうございます。

私は、私は完全に自分自身を説明感じるいけない、しかし、TMは、私が探していた答えを提供します。

私はDRYに従うことを望んでいたし、提供コードTMは最高の私のマークアップ、ちょうどjQueryのコードを変更することは必要としませんでしたので、今回は私を助けてくれます。

ここでも、おかげでたくさん。私は答えを得たどのように迅速にその驚くべき。偉大な仕事を続けてくださいます。

役に立ちましたか？

解決

あなたはそれをきれいにするために、行うことができますまず最初に、より汎用的なもので、すべてのものを同様の呼び出しを置き換えるです。

（注：これのすべては、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
};

他のヒント

私はそれが助け場合href="https://stackoverflow.com/questions/233936/jquery-swapping-elements#234022"> jQueryのスワッピング要素を

マット

私が持っているClarrification、{ID：「1」}あなたが他のDIVのそれらを非表示にするには、一般的なクラス名を表示して作りたいのdivのIDで入れ替える必要があります。

。

思い出してくれるあなたが要素にmulitpleクラスを適用することができます：

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

あなたは、元のdiv要素に取り付けたスタイル規則を持っている場合に役立つかもしれない。

それは良いことだが、あなたは、あなたが割り当てたID年代に、より汎用的なアプローチが必要になります。

頭に浮かぶ最速ソリューションは、「#wrapped」親のdivの下にフェードイン重複divをラップすることです。すべてのリンクを取り、それらを割り当てる「NAME」は等の「サンセット、 『冬』、であるCSSクラス「トリガーNAME」次に、あなたのような何かを行うことができます：


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

これは、可能な限り最良の解決策ではないのですが、それはあなたのアイデアを与える願っています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top