JQuery 代码部分执行答案

【问题标题】：JQuery code executes partwiseJQuery 代码部分执行
【发布时间】：2014-07-14 14:19:55
【问题描述】：

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

相关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");
});

提前非常感谢你:)

【问题讨论】：

标签： javascript jquery html javascript-events event-handling

【解决方案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。这几乎是不言自明的。在这种情况下，您最好使用在按下按钮时切换的类。

【讨论】：

谢谢！类似的东西检查了一百次，但我猜第二双眼睛不会受伤：/ 仍然不起作用......？
click 函数内的代码仍未执行？您的控制台中是否出现任何错误？还是什么都没有？
您在console.log("test4"); 之前的行中忘记了;，并且在检查blau 的值时，您可以只使用if (blau) 而不是if (blau == true)。
好的，谢谢！也发现了我的错误。我需要一个 # 在 rgb 值之前，并且不知何故（在我认为的一些示例中看到它）“lightsteelblue”也不起作用。现在我只需要更改按钮，但这并不重要。谢谢你！
按钮可以通过设置val值来改变。你现在有$('#farbwechsel_button').value = "Blau"; 的地方应该是$('#farbwechsel_button').val("Blau");。您可以通过以下方式获取按钮的当前值：var color = $('#farbwechsel_button').val();。