Question

我正在尝试向网页添加主题。我这样做是通过创建一个对象构造函数，并创建单独的主题对象。对于这个特定的主题，每次标签悬停时，它应该变为随机颜色，然后当悬停时，更改为不同的颜色。

对象似乎正在构造正确，并且随机颜色函数输出一个可用于使用$（＆＃39; someElement＆＃39;）。css（）的字符串，但由于某种原因，似乎当我尝试将它们全部包装在一起。（＆＃34;悬停，...）它只是不起作用。当myThemeObject.method（）将选项卡绑定到.hover函数时，控制台将返回undefined，就好像它没有进入该函数一样。

我认为失败的部分是第四个主要代码块。

// The theme constructor lets each theme define some stuff on the page.
//Type constructor: "Name", "<link href='someFont'>", true, 16%,
function Theme( name, selectValue, fontLink, showSidebar, sideBarDistance, marginDistance, bgImage, bgTint ){
    this.name = name;
    this.value = selectValue; //from actual select
    this.link = fontLink;
    this.margin = marginDistance; //px value
    this.showSidebar = showSidebar; // boolean
    this.sideBarDistance = sideBarDistance;
    this.backgroundImage = bgImage;
    this.backgroundTint = bgTint; //rgba
    }


// Construct our object
var someTheme = new Theme(
    "themeName",
    "themeSelectValue", //Themes are picked in a select
    " <link href='You get the idea' ",
    10,
    true,
    "default",
    "linkURL"
    );


// Generates rgba colors in a string, but a value is a parameter:
// --> "rgba(231,23,4, x)"
function generateRandomRGBA(aValue){
    var aString = String(aValue);
    var r = Math.random()*256|0;
    var g = Math.random()*256|0;
    var b = Math.random()*256|0;
    var x = String(r);
    var y = String(g);
    var z = String(b);
    var q = ", ";  //Probably Don't need space in this.
    return "rgba("+x+q+y+q+z+q+aString+")";
    }


// Defines the method.
// headerRandomize is passed a boolean to set or unset the randomizing
// if set is true, then the tabs are given a .hover function that will call
// generateRandomRGBA. otherwise, .off should unset it.
someTheme.headerRandomize = function (set){
//Set is a boolean
    //We are going to randomize the main tabs and sub tabs of the header
    var $submenuTabs = $('.dd-submenu-tab');
    var $tabs = $('.dd-menu-tab');
    //unset
    if (set != true) {
        console.log("set is false.");
        $tabs.off("hover");
        $submenuTabs.off("hover");
    } else {
    // otherwise set. set parameter to a value of color
        console.log("set is not false.");
        // Console logged this ^
        $tabs.on( "hover" , function(){
            console.log("We got this far.");
            //Console never logged that ^
            var color = generateRandomRBGA(.65);
            console.log(color);
            this.css('background-color', color );
        });
        $submenuTabs.on( "hover" , function(){
            var color = generateRandomRBGA( .65);
            console.log(color);
            this.css('background-color', color );
        });
    }
};

感谢任何帮助，提前谢谢！

Answer 1

我不知道出了什么问题，但这解决了它：

function randomizeSubtabs (set) {
    //We are going to randomize the tabs and dd-submenu tabs.
    var $subTabs = $('.dd-submenu-tab');
    //unset
    if (set != true) {
        $subTabs.off("hover");
    } else {
    // otherwise set. set parameter to a value of color
        $subTabs.hover (function(){
            var color = generateRandomRGBA(0.65); //0.4 is A value.
            $(this).css('background-color', color );
        });
        $subTabs.mouseleave(function(){
            $(this).css('background-color', 'rgba(255,255,255,0.85)' );
        });
    }
};

然后我在控制台中调用它并修复了问题。我出于某种原因，尝试使用该函数作为一种方法只是没有用。我想我只是想尝试将函数链接到对象属性值，或者根本不可能。无论如何，谢谢大家。

将函数附加到.hover的对象方法返回undefined

1 个答案: