Question

尝试做一些逻辑以确保工具提示在可视区域内显示。如何在我下面显示的flot_position中使用我的.css()变量？

//tooltip stuff
function showTooltip(x, y, contents) {

    var window_width = $( window ).width();
    if( x > (window_width - 60) )
    {
        var flot_position = 'right';
    }
    else
    {
        var flot_position = 'left';
    }


    $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            flot_position: x + 15, // This doesn't set 'left' or 'right' to x+15
            border: '1px solid #333',
            padding: '4px',
            color: '#fff',
            'border-radius': '3px',
            'background-color': '#333',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
}

Answer 1

您有两种选择：

按照his answer中的Amit所示调用css(propertyName, propertyValue)版本。

$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
}).css(flot_position, x + 15)
.appendTo("body").fadeIn(200);

事先创建选项对象，然后添加到它，并使用它：

var cssOptions = {
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
};
cssOptions[flot_position] = x + 15;
$('<div id="tooltip">' + contents + '</div>').css(cssOptions).appendTo("body").fadeIn(200);

第二个选项有效，因为虽然您不能在对象初始值设定项的属性初始值设定项的左侧使用变量名，但可以使用带括号表示法的变量名称在初始化程序之后添加属性。在JavaScript中，您可以使用点分表示法和文字属性名称（obj.foo）访问（获取/设置）对象的属性，并使用括号表示法和字符串属性名称（{{ 1}}）。在括号中的表示法中，字符串可以是任何表达式的结果，包括变量查找。

Answer 2

你可以这样做：

$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
}).css(flot_position, x + 15) // use chaining and use .css(key,value) overload
.appendTo("body").fadeIn(200);

在jQuery .css（）调用中使用JS变量来指定CSS属性的名称

2 个答案: