jquery:点击html按钮不执行

时间:2014-04-07 04:55:31

标签: jquery buttonclick

调用任何按钮时,不会调用函数switchDiv。我是Javascript / Jquery的新手。我确信我犯了一个错误。无法抓住它。请帮助..提前致谢。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
        </script>
        <script>
            $(document).ready(function() {
            $("#be-data").on("click", function() { switchDiv(1); });
            $("#red-data").on("click", function(){switchDiv(2);});
            $("#green-data").on("click", function(){switchDiv(3);});
            $("#blue-data").on("click", function(){switchDiv(4);});;
            });

            var switchDiv = function (mapNum) {
                alert("fun" + mapNum);
                switch(mapNum) {
                    case 1:
                        $("#be-data").show();
                        $("#red-data").hide();
                        $("#green-data").hide();
                        $("#blue-data").hide();
                    alert("case 1");
                        break;
                    case 2:
                        $("#be-data").hide();
                        $("#red-data").show();
                        $("#green-data").hide();
                        $("blue-data").hide();
                    alert("case 2");
                        break;
                    case 3:
                        $("#be-data").hide();
                        $("#red-data").hide();
                        $("#green-data").show();
                        $("blue-data").hide();
                    alert("case 3);
                        break;
                    case 4:
                        $("#be-data").hide();
                        $("#red-data").hide();
                        $("#green-data").hide();
                        $("blue-data").show();
                    alert("case 4");
                        break;
                    default:
                        $("#be-data").show();
                        $("#red-data").hide();
                        $("#green-data").hide();
                        $("#blue-data").hide();
                    alert("case def");
                    }
                }

        </script>
    </head>
    <body>
        <p>If you click on me, I will disappear.</p>
        <input type="button" id="be-data" value="be"/>
        <input type="button" id="red-data" value="red"/>
        <input type="button" id="green-data" value="green"/>
        <input type="button" id="blue-data" value="blue"/>
    </body>
</html>

4 个答案:

答案 0 :(得分:4)

替换

alert("case 3);

alert("case 3");

a&#34;最后遗漏了。

答案 1 :(得分:2)

你错过了第36行的结束引号

alert("case 3);

答案 2 :(得分:1)

你已经写过alert("case 3);你应该写alert("case 3");。然后就可以了

答案 3 :(得分:0)

  

这不是你问的答案。这是建议的方法   动态地进入jquery。你就像这样简化上面的代码   不希望任何开关案例和5个或更多语句。整体   功能仅包含5行。使用下面的代码吧   比你的代码更快。

$("input[type='button']").on("click", function() {

        $(this).show();
        $("input[type='button']").not(this).hide();

 });

Fiddle