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

我正在制作一个应用程序，你可以自定义不同元素的不透明度。该应用程序有简单的“向上”和“向下”按钮，用于增加和减少不透明度。但是，切换函数没有在我的css中实现。这是我的HTML：

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

和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
    });
});

这是小提琴：

我花了很多时间查找有关堆栈溢出的问题，大多数答案都太混乱而无法理解。jQueryAPI对我也没有多大帮助

---

非常感谢您的帮助。

您从未在单击事件中更新CSS，因此它将保持原始值

x

此外，您没有正确使用闭包，因为您在每个作用域中重新声明和初始化

x

，而不是允许它引用父作用域中的变量

最后，您对

css

调用（和对象表示法）使用了错误的语法；只需使用

'property'，value

参数符号，而不必包装它们

所有这些问题的未经测试的纠正：

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

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

---

伙计，这是因为当点击事件发生时，你从不改变css

我更新了你的代码，它正在工作，检查这个

 $("#up").click(function(){
     x += 0.2;
     $("#container").css('opacity', x);
 });

在这里找到

替换：

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

作者：

对于#down，也是如此，因为如果

$（“#container”）.css（'opacity'，x）仍然在click事件之外，它在加载页面时第一次被调用

完整JS:

$(function() {
    var x = 0.5;

    $("#up").click(function(){
        x += 0.2;    
        $("#container").css('opacity', x);
    });

    $("#down").click(function(){
        x -= 0.2;    
        $("#container").css('opacity', x);
     });
});

希望这能有所帮助。
您的代码有很多地方出错（但不要气馁！）：

var x=x+=0.2可能不是您尝试执行的任务类型。这会将
x
增加
0.2
，然后将一个新的局部变量
x
分配给所评估的
x
的值。由于x可以从回调函数的作用域访问它，所以只需使用
x+=.2

css
函数参数中的
{'opacity'，x}
不是有效的对象表示法。您正在查找
{opacity:x}
按下按钮时，需要设置元素的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});
     });
});

请在此处查看工作演示：

我强烈建议您在进入jQuery之前先阅读一些Javascript，因为您将更好地了解该语言的工作原理。
您的jQuery应该是这样的

因为您将VARx设置为全局变量，所以不需要再次声明它

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

    });

那不是问题problem@KevinSimple：那么，你能解释一下是什么，或者为什么这个观察不正确吗？我添加了$（“#container”）.css（{'opacity'，x}）；我的两个点击事件，但它仍然不会更新CSS。@jaker:还有感觉。我是jQuery新手，所以这很有帮助。非常感谢。你能解释一下为什么这个代码会回答这个问题吗？代码唯一的答案是，因为它们不教解决方案。非常感谢。很抱歉，我只是想帮他解决这个问题，而你原来的答案不太正确。@KevinSimple：我不介意纠正，是因为没有解释，重复了好几次。请纠正我，但如果可能的话，这不仅仅是一个更详细的否决票。不知道为什么会被否决，因为这是正确解释所有三个问题的第一个答案。当然，inital
var x
应该读取当前的不透明度，这样当多次单击时，它将逐渐具有更高的不透明度？在我的JSFIDLE演示中，我已将
#container
的初始不透明度设置为
0.5
。好的，谢谢，我想我对这里发生的事情有了更好的了解。原始代码中的“var”是否每次都创建新的全局变量@我从原始代码中删除的analytalicaThe
var x
在回调函数的范围内声明变量。那些
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});
     });
});

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

    });