1

誰か助けてくれないかしら！

私のサイトには2つの別々のjQueryステートメントがあります。これらは基本的にdivに作用し、クリックすると画面右側の負のマージンで非表示になっているコンテンツゾーンを展開します。

私がやりたいのは、各ページにこれらの要素をいくつか含めることですが、要素ごとにまったく新しいステートメントを追加し続ける必要がないように、できるだけ合理化されたものが必要です。

問題のWebサイトへのリンクは次のとおりです（要素は右側にあります。1つはプラス記号が付いており、もう1つはTwitterアイコンが付いています）

サンドバンクスプロパティ

以下は私が持っているコードです：

//関数の設定：

function extraOn() {
var w = $('.homeplus-expanded').width();
$('.homeplus-expanded').animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
}


function extraOff() {
var ws = $('.homeplus-expanded').innerWidth();
$('.homeplus-expanded').animate({
    right : '0',
    'margin-right':-ws
    },'fast'); 
}



function shareOn() {
var w = $('.homeplus-expanded').width();
$('.shareplus-expanded').animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
}


function shareOff() {
var sp = $('.shareplus-expanded').innerWidth();
$('.shareplus-expanded').animate({
    right : '0',
    'margin-right':-sp
    },'fast'); 
}

//そしてこれらの関数をonClickで呼び出します：

$('.homeplus').click(function(){
extraOn();
});


$('.homeplus-expanded span.close').click(function(){
extraOff();
    });

$('.shareplus').click(function(){
shareOn();
});


$('.shareplus-expanded span.close').click(function(){
shareOff();
    });

ご覧のとおり、コードをよりすっきりとモジュール化するためのクロスオーバーと余地があると確信しています。

あなたが提供できるどんな助けにも感謝します...

4

3 に答える 3

0

セレクターを使用する単一の関数を使用し、イベント ハンドラー$(this)から呼び出します。click例えば：

function turnOn() {
  var w = $(this).width();
  $(this).animate ({
    right : '0',
   'margin-right':'0px'
  }, 'fast');
}
于 2013-02-28T16:56:41.750 に答える
0

クリックされた要素への参照を「extraOn」およびその他の関数に渡し、この参照をjqueryセレクターとして使用できます

// Call it like this 
extraOn(this);

function extraOn(elem) {
  var w = $(elem).width(); // No idea what this is for
  $(elem).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
}

または、extraOn 関数のコンテンツを実際のコールバックとして使用することもできます。この方法では、次のようにイベントを使用することもできます。

$('.homeplus').click(function (ev) {
  ev.preventDefault(); // if it is a <a> element or has some other default behaviour
  var w = $(this).width(); // No idea what this is for
  $(this).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
});

これらの要素を ajax でロードする予定がある場合は、遅延イベント ハンドラーを使用することをお勧めします。

$(document).on('click','.homeplus',function (ev) {
  ev.preventDefault(); // if it is a <a> element or has some other default behaviour
  var w = $(this).width(); // No idea what this is for
  $(this).animate ({
    right : '0',
    'margin-right':'0px'
    }, 'fast');
  }
});
于 2013-02-28T16:57:59.750 に答える
0

重複したコードをリファクタリングし、機能するように移動する必要があります。次に、対応するハンドラーを関数に渡して、クリック イベントをバインドします。バインドされたクリック イベント関数は関数スコープ内にあるため、クリック イベントに表示されます。コードのリファクタリングをさらに行ってみてください:)。コードのリファクタリングは面白く、リファクタリングされたコードは再利用でき、メンテナンスも簡単です。

以下のように簡略化されたバージョン。

function InitContentZone(turnOnElement, turnOffElement, expandElement)
{
    var expandEle = expandElement;
    function extraOn() {
        $(expandEle).animate ({
            right : '0',
            'margin-right':'0px'
        }, 'fast');
    }

    function extraOff() {
        var ws = $(expandEle).innerWidth();
        $(expandEle).animate ({
            right : '0',
            'margin-right':-ws
        }, 'fast');
    }

    $(turnOnElement).click(extraOn);
    $(turnOffElement).click(extraOff);
}

$(document).ready(function()
{
    InitContentZone('.homeplus', '.homeplus-expanded span.close', '.homeplus-expanded');
    InitContentZone('.shareplus', '.shareplus-expanded span.close', '.shareplus-expanded');
});
于 2013-02-28T17:08:47.000 に答える