Question

如果您运行此代码段，您将看到一个按钮。如果单击它，它将旋转。我在Visual Studio中有完全相同的代码（如下图所示）。但是，当我调试代码或按“在浏览器中查看（谷歌浏览器）”时，它根本不起作用。

$("#rotate").click(function () {
    if ($(this).css("transform") == 'none') {
        $(this).css("transform", "rotate(45deg)");
    } else {
        $(this).css("transform", "");
    }
});

body {
}

#rotate {
    width: 30px;
    height: 30px;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="css/css.css" />
    <script src="scripts/jquery-2.1.1.js"></script>
    <script src="scripts/JavaScript.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <button id="rotate"></button>
</body>
</html>

Answer 1

您是否在$(document).ready(function () { });内包装了按钮绑定？从你的例子中可以看出这一点，因为它可以正常工作。

或者将您的javascript代码放在没有&(document).ready功能的按钮下面，这也有效，因为如果它位于按钮上方，浏览器将尝试绑定一个尚未退出的按钮。

    <script>
        $(document).ready(function () {
            $("#rotate").click(function () {
                if ($(this).css("transform") == 'none') {
                    $(this).css("transform", "rotate(45deg)");
                } else {
                    $(this).css("transform", "");
                }
            });
        });
    </script>
    <style>
        #rotate {
            width: 100px;
            height: 30px;
        }
    </style>
    <button id="rotate" type="button">button</button>

为什么这个按钮不旋转是视觉工作室？

1 个答案: