将 .css() 方法存储在变量中

Question

我用谷歌搜索了我的脸，但没有运气，包括搜索这个网站。我只想要一个简单明确的答案。

这是我的 HTML：

<div id="main-navigation">  
    <ul>
        <li>
            <a href="#">home</a>
        </li>
    </ul>
</div>

这是我正在使用的 css 方法，我已经测试过并且有效：

// Layout 1
$('#default').click(function() {
    if('true' == 'true') {
        // General Values
        $(hmnavUL).css({ backgroundColor: bgDefault });
});

这是我创建的变量：

var bgSet = $(hmnavUL).css({ backgroundColor: bgDefault });

这是我想要实现的目标：

// Layout 1
$('#default').click(function() {
    if('true' == 'true') {
        // General Values
        bgSet
}); 

结果：

浏览器完全忽略了我的“bgSet”变量，但当我不使用变量时它会识别样式。我的首选版本也没有给我任何错误。如果您能告诉我有关我的语法的任何信息，我们将不胜感激。我假设这是我的语法。

我已经链接了一个照片示例来展示我想要的最终产品（注意：我还不能附上图片）。

（默认布局，第二个布局，移除所有样式）

想要的结果：Result

Answer 1

该变量不包含您期望它执行的操作。代码不会保存在变量中，而是立即执行，css 方法（即 jQuery 对象）的返回值存储在变量中。

您不能将“宏”放入变量中并通过引用该变量来执行它。与您尝试做的最接近的事情是将代码放入函数中，以便稍后执行：

var bgSet = function() {
  $(hmnavUL).css({ backgroundColor: bgDefault });
});

// Layout 1
$('#default').click(function() {
  if('true' == 'true') {
    // General Values
    bgSet();
  }
});

Answer 2

您似乎想根据click eventHandler 切换和元素的css 属性。你有正确的想法，但你的 javascript 有点不对劲。这是一个应该执行您想要的功能的示例：

// Function to change the css of an element
function makeRed(elem){
    elem.css({ "background-color" : "red" });
};

// Attach an event handler..
$("#clickMe").click(function(){

    // Store the object as a variable
    var obj = $("#foo"); // <-- The element you want to change the bg of
    
    // Run your function.
    makeRed(obj);
    
});

#foo{
    width: 50px;
    height: 50px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="foo"></div><br />
<button id="clickMe">Click Me!</button>

这实际上是关于学习 javascript 选择器、函数和变量的工作原理。虽然您的问题对于 StackOverflow 的表述方式有点迟钝，但我感谢您发布了您的代码并且您正在努力学习。 :)