jquery - jQueryはリアルタイムでイベントごとに変数を変更します - 動作しません

Question

設定https://github.com/trentrichardson/UberUploadCropper/blob/master/example-advanced/index.phpで「aspectRatio」をリアルタイムで変更する方法。

$(function() {

$.("#test1").click( function () {
    $ratio = 1;
});
$.("#test2").click( function () {
    $ratio = 2;
});

$('#UploadImages').uberuploadcropper({

...

'aspectRatio': $ratio, 

動作しません。なんで？どのように作るのが正しいですか？

Answer 1

変数が設定される前にプラグインを呼び出しています。クリックイベントが発生したときに.uberuploadcropperを呼び出す必要があります。次のようなものを試してください。

$(function() {
    $.("#test1").click( function () {
        uploadCropper(1);
    });
    $.("#test2").click( function () {
        uploadCropper(2);
    });

    function uploadCropper(ratio){
        $('#UploadImages').uberuploadcropper({

            ...

            'aspectRatio': ratio, //now the value will be taken from global scope
        });
    }
});

Answer 2

ドットを削除します。後$.("

$("#test1").click( function () {
    $ratio = 1;
});
$("#test2").click( function () {
    $ratio = 2;
});

Answer 3

のグローバル変数を定義します$ratio。

例：

var $ratio; //Define a global variable like this
$(function() {

    $("#test1").click( function () {
        $ratio = 1;
        initPlugin();
    });
    $("#test2").click( function () {
        $ratio = 2;
        initPlugin();
    });

    function initPlugin() {    
        $('#UploadImages').uberuploadcropper({

             ...

             'aspectRatio': $ratio, //now the value will be taken from global scope
        });
    }
});