Question

我有一个javascript代码将jQuery颜色框绑定到我的元素，但是无法弄清楚如何在回调中更改属性的值：

$(".iframe").colorbox({
    iframe: true, 
    width: '80%',
    height: '80%',
    onLoad: function() {
        console.log(width);
    },
});

为什么我会获得ReferenceError: width is not defined或如何访问此属性？

Answer 1

您收到错误，因为width只是您传递给colorbox函数的对象的属性。它不是你可以参考的变量。

他们这样做：

var myWidth = '80%';

$(".iframe").colorbox   ({
    iframe:true, 
    width: myWidth,
    height:'80%',
    onLoad:function() {

        console.log( myWidth );   

    },
});

或者

var props = {
    iframe:true, 
    width: '80%',
    height:'80%',
    onLoad:function() {

        console.log( props.width );   

    },
};

$(".iframe").colorbox(props);

Answer 2

您正尝试访问全局范围内的width变量。有点像尝试使用document，window或$。您要访问的是colorbox对象的width属性。如果插件将this绑定到colorbox对象，那么您可以执行以下操作：

$(".iframe").colorbox({
    ...
    onLoad: function() {
        console.log(this.width);
    }
});

但我假设您正在尝试访问要将颜色框绑定到的元素的宽度。如果是这种情况，您可以尝试这样的事情：

var $iframe = $(".iframe");
$iframe.colorbox({
    ...
    onLoad: function() {
        console.log($iframe.width());
    }
});

Answer 3

将此内容写入onLoad函数：

onLoad: function() {
    console.log($(this).width());
}

Answer 4

通过使用：

，我能够实现我想要的目标

width: function() {

}

这样我可以通过编程方式覆盖我试图做的宽度变量...

无法访问javascript属性

4 个答案: