フェードアウト機能が複数回機能しない

Question

これは私が書いたコードです。私はjqueryの知識がほとんどなく、私が見たものを書こうとしました。私は彼らが一度それを実行することは簡単だと確信していますが、それは動作しますが、その後、それはちょうど各クリックのためにいくつかのままにして、次のクリックのために機能を呼び出すことはありません。私は別のスクリプトで同じ問題を抱えていますが、私は関数を複数回呼び出すことはできません。 1つは、それがそうするようにそれをやった。どんな助けでも大歓迎です。

$.noConflict(); 
jQuery(document).ready(function ($) { 
    $("#scrollmenu"); 

    $("#e_emd").click(function() { 
     $("#e_em").show(); 
     $("#e_v").delay(1200).fadeOut("slow"); 
     $("#e_s").delay(1200).fadeOut("slow"); 
     $("#e_l").delay(1200).fadeOut("slow"); 
    }); 

    $("#e_vd").click(function() { 
     $("#e_em").delay(1200).fadeOut("slow"); 
     $("#e_v").show(); 
     $("#e_s").delay(1200).fadeOut("slow"); 
     $("#e_l").delay(1200).fadeOut("slow"); 
    }); 

    $("#e_sd").click(function() { 
     $("#e_em").delay(1200).fadeOut("slow"); 
     $("#e_v").delay(1200).fadeOut("slow"); 
     $("#e_s").show(); 
     $("#e_l").delay(1200).fadeOut("slow"); 
    }); 

    $("#e_ld").click(function() { 
     $("#e_em").delay(1200).fadeOut("slow"); 
     $("#e_v").delay(1200).fadeOut("slow"); 
     $("#e_s").delay(1200).fadeOut("slow"); 
     $("#e_l").show(); 
    }); 
}); 

<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT --> 
<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div> 

<img id="e_em" src="images/eventmanage.png" width="1037" height="480" /> 
<img id="e_v" src="images/video.png" width="1128" height="480" /> 
<img id="e_s" src="images/sound.png" width="1011" height="480" /> 
<img id="e_l" src="images/light.png" width="1011" height="480" /> 

私が取り組んでいる全ページをアップロードしました。

私が上でそれをしようとしているサイトでは、私は何を見ていますが、私は

<div id="scrollmenu">| 
    <a id="e_emd" href="#Event_Management" class="panel">Event Management</a> | 
    <a id="e_vd" href="#Video" class="panel">Video</a> | 
    <a id="e_sd" href="#Sound" class="panel"></a>Sound | 
    <a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> | 
</div> 

複数持っている関数を呼び出すために複数回IDを使用できないことですここhttp://www.mac-av.com/test2/

です同じページの時間

私が持っているスクロールのために、これまでのカテゴリでクリックされたすべてのボタンごとに、それぞれのイメージを変更する必要があります。私はこれをやっているのは、低解像度のコンピュータ上のページが次のカテゴリのコンテンツウィンドウの左側に表示されるからです。だから、このスクリプトを作成すると、そこから画像を隠して、それが存在するカテゴリの画像のみを表示するだけでなく、消える前にスクロールしながら他の画像を見ることができるはずです。

ボタンの最初のセットでは機能しますが、後では機能しません。私はIDで一度だけ呼び出すことができることを認識していますが、それぞれに異なるスクリプトを作成するのではなく、簡単な方法がありますか？

Answer 1

なぜあなたは$ .noConflict（）;を使用していますか？ ？それを削除してみてください。また、あなたの準備ができて関数から$を削除し、「jQueryを」するのではなく、それを使ってみて、これは次のように見えます：

$(document).ready(function() { 
// blah blah 
}); 

そして、はい、document.ready火災を、それがロードされるときがありますが、イベントにあなたのIDをリンクします、彼らはうまくいくはずです。このページにサードパーティのコントロールやその他のAjaxコントロールがありますか？

Answer 2

ページへのリンクを張ってもらえますか？これを行うことができれば、すぐにデバッグすることができます。 fadeOutは複数回動作しますので、ページ上のスクリプトとセレクタで何かが必要です。その間に役立つかもしれない

ヒント：

• があなたのID名でより冗長には、それが戻ってあなたのコードを見たときに助けたりします他の人がそれ
• 宇宙の事を見たとき、私たち彼らはあなたが何もしていないされて上部にランダム$("#scrollmenu");宣言を持って
• を入れ子になっている場合、正しく...あなたはその
• を取り除くことができますあなたは1つの府にこれを行うことによって、あなたのコードをよりDRYすることができますnction - すべてのセレクタの配列と渡したい配列を渡してから、その配列をクリックしてループし、外に出たいものと一致する場合はそれを表示し、そうでない場合は非表示にします。私がここで何を意味するのか分からないなら、私は例を書くことができます。

Answer 3

いくつかのこと：

• idのは、あなたの要素のスタイルを設定するためのコード
• 使用CSSの量を減らすために
• 使用CSSセレクタとの良好なマークアップページごとに一度使用することができます

jQueryは要素の属性を読み取ることができるので、それを活用してください。

<script type="text/javascript"> 
$(document).ready(function(){ 
    // when any link inside scrollmenu is clicked 
    $(".scrollmenu a").click(function (e) { 
    // don't follow the link 
    e.preventDefault(); 
    // find out which image to show 
    var target_id = $(this).attr('href'); 
    // fadeOut all visible images inside .images that isn't the one we'll show 
    $('.images img').is(':visible').not(target_id).fadeOut("slow"); 
    // show the target 
    $(target_id).show(); 
    }); 
}); 
</script> 

<div class="scrollmenu">| 
    <a href="#e_em">Event Management</a> | 
    <a href="#e_v">Video</a> | 
    <a href="#e_s"></a>Sound | 
    <a href="#e_l">Lighting &amp; Staging</a> | 
</div> 

<div class="images"> 
    <img id="e_em" src="images/eventmanage.png" width="1037" height="480" /> 
    <img id="e_v" src="images/video.png" width="1128" height="480" /> 
    <img id="e_s" src="images/sound.png" width="1011" height="480" /> 
    <img id="e_l" src="images/light.png" width="1011" height="480" /> 
</div> 

あなたはアニメーションのより複雑なシーケンスのための@ JonHの方法と組み合わせることができます。

Answer 4

あなたのコメントをさらに詳しく説明するための例を設定しました。 http://jsfiddle.net/jMQhZ/11/

最初のボックスをクリックすると、#e_emdクリックイベントが発生します。もう一度クリックすると、何もしないので何も起こりません。 show allをクリックすると、divsのすべてが正常に戻っていることがわかります。ここで#e_emd divをクリックすると、再度機能が実行されます。