javascript - 如何制作 jQuery 变量切换按钮？

Question

我正在制作一个应用程序，您可以在其中自定义不同元素的不透明度。该应用程序具有简单的“向上”和“向下”按钮，用于增加和减少不透明度。但是，切换功能未在我的 CSS 中实现。这是我的 HTML:

<div id="container">Make me lighter.</div>
<br>
<br>
<button id="up">up</button>
<br>
<button id="down">down</button>

CSS:

* {
     margin: 0px;
     padding:0px
}

#container {
     padding: 10px;
     border: 10px solid;
}

和 jQuery:

$(document).ready(function () {
    var x = 0.5;

    $("#up").click(function () {
        var x = x += 0.2;
    });
    $("#down").click(function () {
        var x = x -= 0.2;
    });

    $("#container").css({
        'opacity', x
    });
});

这是 fiddle :http://jsfiddle.net/j96bu778/1/

我花了很多时间在 Stack Overflow 上查找问题，但大多数答案都让人难以理解。 JQuery API 对我的帮助也不大。

非常感谢您的帮助。

Answer 1

您的代码有很多问题(但不要气馁!):

1. var x = x += 0.2; 可能不是您尝试执行的那种分配。这会将 x 增加 0.2，然后将一个新的局部变量 x 分配给评估的 x 的值。因为 x 它可以从回调函数的范围内访问，所以只需使用 x += .2。
css 函数参数中的
2. { 'opacity', x } 不是有效的对象表示法。您正在寻找 { opacity: x } 。
3. 您需要按下按钮时设置元素的 CSS。通过从事件回调中省略它，您的按钮不会执行任何操作。我已将 $("#container").css({opacity: x}); 移到这些回调函数中。

现已修复:

$(document).ready(function() {
    var x = 0.5;
    $("#up").click(function(){
        x += .2;
        $("#container").css({opacity: x});
     });
    $("#down").click(function(){
        x -= .2;
        $("#container").css({opacity: x});
     });
});

在此处查看工作演示:JSFiddle

我强烈建议您在深入研究 jQuery 之前阅读一些 Javascript，因为您将更好地理解该语言的工作原理。