jquery - 関数作業ウィンドウのサイズ変更

Question

これは私のコードです

var bodyWidth = ($(document).width()/2);
console.log(bodyWidth);
$('.freeshipping').css('right',bodyWidth);

それは問題ありませんが、この関数の本文のサイズ変更とページの更新を行いたいと思います。どのように？

Answer 1

$(window).resize(function(){
    var bodyWidth = ($(document).width()/2);
    console.log(bodyWidth);
    $('.freeshipping').css('right',bodyWidth);
});

更新：関数を1回呼び出します：

$(window).resize((function(){
   var bodyWidth = ($(document).width()/2);
   console.log(bodyWidth);
   $('.freeshipping').css('right',bodyWidth);

   return arguments.callee;
})());​

Answer 2

$(window).on('resize', function() {
   var bodyWidth = ($(document).width()/2);
   console.log(bodyWidth);
   $('.freeshipping').css('right',bodyWidth);
});

また、（明示的なサイズ変更アクションなしで）1回も実行する必要がある場合は、trigger()メソッドをチェーンします

$(window).on('resize', function() {
   var bodyWidth = ($(document).width()/2);
   console.log(bodyWidth);
   $('.freeshipping').css('right',bodyWidth);
}).trigger('resize');

DOM要素をターゲットにして$('.freeshipping')いるため、このスニペットはdomreadyイベントで必ずラップしてください。

Answer 3

これを試して

 $(window).resize(function() {
     var bodyWidth = ($(document).width()/2);
    console.log(bodyWidth);
    $('.freeshipping').css('right',bodyWidth);
    });

詳細： http： //api.jquery.com/resize/

Answer 4

さて、誰もが問題ない質問に答えましたが、！別のサンプルを次に示します。

    //store temporarily the existing method
    var resize = $.fn.resize;

    //overwrite $(window).resize with your method
    $(window).resize(function () {

        //here you do your stuff
        stuff.setWidth(param);

        //call the original
        resize;
    });

違いは、あなたが$(window).resize(function () { /* ... */ });失いたくない、ただ拡張するだけの方法をすでに持っているということです。私が自分のjQueryプラグインを書いていたときに、この問題に遭遇しました。ユーザー/開発者によって追加された既存の$（window）.resize（）メソッドを検討する必要がありました。したがって、この方法でそれを保持し、自分のプラグインを更新するために必要なメソッド/関数を実行します。