JQuery部分触发

我是一个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");
});

在你的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:这里有一个小提琴和一个工作示例。这是不言自明的。在这种情况下，你最好使用你按下按钮切换的类

相关内容

最新更新

热门标签：