0

JavaScriptファイルに関数があります：

function hoverWidgetOn (param, value) {
    var element = $("*[data-label]"),
    config = {
        'display':'inline',
        'position':'absolute',
        'top':'6.5em',
        'padding' : '0.5em',
        'background-color':'#383838',
        'color':'white',
        'font-size' : '0.8em',
        'opacity' : '0.9',
        'param' : 'value'
    },
    label = $(this).attr("data-label"),
    d = document.createElement('span'),
    t = document.createTextNode(label);

    d.className = "labelShow";
    $(this).append(d);
    $('.labelShow').append(t).css(config);
}

私がやりたいことは、関数を呼び出すときに変数構成にパラメーターと値を追加することです

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

したがって、このアプリケーションのユーザーは、他の JavaScript ファイルでこの関数を呼び出すときに、ラベルの外観を変更するために JavaScript ファイルを変更する必要はありませんが、どのように試しても機能しません...誰でも私を助けることができます。

4

4 に答える 4

3

これを行うとき：

element.on('mouseenter', hoverWidgetOn('background-color', 'red'))

hoverWidgetOnすぐに呼び出されます。

あなたはこれを行うことができます：

element.on('mouseenter', function() { 
    hoverWidgetOn.call(this, 'background-color', 'red') 
});

無名関数でラップすると、関数を実行する代わりに関数が渡されます。使用callすると、のコンテキストを保持できますthis。

于 2013-10-25T15:40:48.850 に答える
2

関数を変更して、param と value を引数として取り、mousenter イベントで実際の変更を行う関数を返すことができます。

function hoverWidgetOn (param, value){
    return function() {
        var element = $("*[data-label]");
        var config = {'display':'inline',
            'position':'absolute',
            'top':'6.5em',
                'padding' : '0.5em',
            'background-color':'#383838',
            'color':'white',
            'font-size' : '0.8em',
            'opacity' : '0.9'};
        config[param] = value; //add your param

        var label = $(this).attr("data-label"),
        d = document.createElement('span');
        d.className = "labelShow";
        var t = document.createTextNode(label);
        $(this).append(d);
        $('.labelShow').append(t).css(config);
    };
}
于 2013-10-25T15:42:21.460 に答える
1

取得した構文でのみ関数参照を渡すことができます。変数を渡すには、呼び出しを別の関数でラップする必要があります。$.proxyその関数内でスコープを維持するために使用できます。これを試して：

element.on('mouseenter', function() {
    $.proxy(hoverWidgetOn('background-color', 'red')), this);
});

また、動的なキー/値をconfigオブジェクトに追加するには、配列表記を使用する必要があります。実際、その関数には jQuery と JS が奇妙に混在しています。これを試して：

function hoverWidgetOn (param, value){
    var element = $("*[data-label]");
    var config = {
        'display': 'inline',
        'position': 'absolute',
        'top': '6.5em',
        'padding' : '0.5em',
        'background-color': '#383838',
        'color': 'white',
        'font-size': '0.8em',
        'opacity': '0.9'
    };
    config[param] = value;

    var label = $(this).attr("data-label"),
        $span = $('<span />', { 
            class = 'labelShow',
            text = label
        }).css(config);
于 2013-10-25T15:39:26.993 に答える
0

jQuery を使用しているため、次のようにカスタム オブジェクトを関数に渡すことができます。

element.on('mouseenter', {param: 'background-color', value: 'red'}, hoverWidgetOn);

次に、このデータにアクセスします。

function hoverWidgetOn(e) {
    var param = e.data.param;
    var value = e.data.value;
    (...)
}

編集：
私の答えは他の答えと非常に似た解決策（同じではないにしても）を導入したので、別のアプローチを提案しました。

于 2013-10-25T15:39:43.367 に答える