1

これにタイトルを付ける方法がわかりませんが、問題は...問題なく動作するjQuery行がいくつかあります.ページがロードされたときに最初にアクティブになり、次にdiv内をクリックするとアクティブになります。

現在、同じコードを時間間隔で実行しようとしていますが、まったく機能せず、エラーも出力されません....

何か案が？ウェブサイトは WordPress で構築されており、スクリプトはhttp://demo.lavenderwp.com/nowland/で確認できる画像の「​​スライドショー」上で実行されています。

時間間隔に使用したコードは次のとおりです。

setInterval("myFunc()",100);

function myFunc()
{
$('#slider, .leftNav, .rightNav, .bottomNav').click(function()
        {
            $(".contentHolderUnit").filter(function(i, el) 
            {
                    return el.style.zIndex <= 100;
                }).find('img').wrap('<div class="blue" />') .css({opacity: 0.75, border: "0px white solid"});

            $(".contentHolderUnit").filter(function(i, el) 
            {
                    return el.style.zIndex <= 100;
                }).find('div.car').css({display: "none"});

            $(".contentHolderUnit").filter(function(i, el) 
            {
                    return el.style.zIndex >= 100;
                }).find('img').css("background-color","") .css({opacity: 1, border: "15px white solid"});

            $(".contentHolderUnit").filter(function(i, el) 
            {
                    return el.style.zIndex >= 100;
                }).find('div.car').css({display: "block"});
        });
}
4

5 に答える 5

1

答えは：これをしないでください！

クリック イベント リスナーを 1 秒間に 10 回繰り返しアタッチするのはなぜですか?!? jQueryがそれらを一度だけアタッチするほど賢くない限り、これは急速にメモリを使い果たします..

クリック イベントを一度だけ添付する必要があります。これを行っている理由が、リスナーをアタッチしている DOM 要素がスライドショー中に置き換えられることである場合は、代わりにイベント委任を使用してください。

または、ページが最初にロードされたときにイベントリスナーがアタッチされないという単純な問題である場合は、他の人が示唆したように、$(document).ready(myFunc);またはを使用します$(myFunc);。

あなたのコード、特に関連する HTML をもっと見せてください。そうすれば、誰かがより具体的な提案をすることができます。

コードをさらに詳しく見るとmyInit、その関数のコードには、削除するのが最善の繰り返しが少しあり、また、1 つずれているエラーもあります。要素の 1z-indexつがちょうど 100 の場合はどうなりますか? それはすべての.filter()テストに合格します。また、インデントは少し紛らわしいです。

そのコードをクリーンアップする方法の例を次に示します。

function myFunc() {
    $('#slider, .leftNav, .rightNav, .bottomNav').click(function() {

        var $all = $(".contentHolderUnit");
        var $lower = $all.filter(function(i, el) {
            return el.style.zIndex <= 100;  // or should it be < 100 ?
        });
        var $upper = $all.not( $lower );

        $lower.find('img').wrap('<div class="blue" />').css({
            opacity: 0.75,
            border: "0px white solid"
        });

        $lower.find('div.car').css({
            display: "none"
        });

        $upper.find('img').css({
            backgroundColor: "",
            opacity: 1,
            border: "15px white solid"
        });

        $upper.find('div.car').css({
            display: "block"
        });
    });
}
于 2013-06-06T16:07:29.420 に答える
0

コードをラップしたいと思うかもしれません$(document).ready()

ここで詳細を読むことができます: http://learn.jquery.com/using-jquery-core/document-ready/

うまくいけば、それは役に立ちます。

于 2013-06-06T16:07:07.640 に答える