Question

我是JQuery的初学者，我正在尝试创建一个按钮，动态更改CSS中定义的颜色，具体取决于它现在的颜色（只需在蓝色/红色之间切换），也可以更改按钮。 .draggable（）部分执行得很好，第一个和最后一个console.log也是如此，所以除了click事件处理程序中的部分之外的所有部分都可以工作......但为什么呢？

相关的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Meine Website</title>
    <meta charset="utf-8">
    <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            type="text/javascript">
    </script>
    <script
            src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
            type="text/javascript">
    </script>
    <script src="home_jquery.js"></script>
    <script src="home_javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="home_style_blau.css">

</head>
<body>
    <input type="button" id="farbwechsel_button" value="Rot" />
/* rest of html (taschenrechner_box, etc.) */
</body>

这是jquery部分：

var blau = true;

$(document).ready(function () {
    $('#taschenrechner_box').draggable();


    console.log("test1");
    $('#farbwechsel_button').click(function() {
        console.log("test2");


        if (blau == true) {
            console.log("blau = " + blau);
            $('body').css({"background-color": "8b0000"});
            $('#farbwechsel_button').value = "Blau";
            blau = false;
        }
        else {
            console.log("blau = " + blau);
            $('body').css({"background-color": "lightsteelblue"});
            $('#farbwechsel_button').value = "Rot";
            blau = true;
        }
        console.log("test3");

    })
    console.log("test4");
});

非常感谢您提前:)）

Answer 1

在您的HTML中，您有：

<input type="button" id="farbwechsel_button" value="Rot" />

但在您的JS中，您可以参考

$('#farbwechel_button').click(function() {

请注意JS中遗忘的 s 。所以JS应该是：

$('#farbwechsel_button').click(function() {

编辑：您已经忘记了按钮中的 s 。不要忘记在任何地方添加它。您在最后一次;功能之前也忘记了console.log()。

编辑2：这里有一个 Fiddle ，附有一个工作示例。它几乎是自我解释的。在这种情况下，您最好使用按下按钮时切换的课程。

JQuery代码部分执行

1 个答案: