使用按钮调用javascript函数

时间:2015-01-10 10:19:19

标签: javascript html css

我一直在用键盘抨击我的脸,试图弄清楚为什么我的javascript代码在离子内部无效。

有人可以告诉我在变量中存储数字的方法,显示该变量并在单击按钮时增加该变量。

我有一个基本的javascript游戏没有问题,但我试图将它合并到离子..它是一个标签屏幕内是否意味着我必须编写不同的JavaScript?

以下代码包含jquery,我不认为ion会轻易支持。

但如果有人可以帮助我,我只需要一种方法来存储一个变量(很可能是使用localforage)和一种显示变量的方法(span?)以及一种通过点击按钮来增加taht变量的方法? (点击或点击?)

谢谢你,我已经在键盘上对着键盘抨击了2天,但它不起作用......

将所有离子代码链接起来有点困难,因为它不仅仅是3个文件......



var coffee = localStorage.getItem("coffee") ?  localStorage.getItem("coffee") : 0.0;
var totalCoffee = localStorage.getItem("totalCoffee") ? localStorage.getItem("totalCoffee") : 0.0;


var cookRate = localStorage.getItem("cookRate") ?  localStorage.getItem("cookRate") : 1.0;


function prettify(input){
    var output = Math.round(input * 1000000)/1000000;
	return output;
}

$("#coffeeButton").click(function(e) {

    var obj = $("#clone").clone(); 
    var img = $("#myImg").clone(); 

    $("body").append(obj);
    $("body").append(img);

    obj.html("+"+ cookRate);
    coffee += cookRate;
    totalCoffee += cookRate;
    document.getElementById("coffee").innerHTML = prettify(coffee);
    document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);

    obj.css('position','absolute'); 
    obj.css('z-index', '2');
    img.css('position','absolute');
    img.show();

    obj.offset({left: e.pageX-10, top: e.pageY-80});
    img.offset({left: e.pageX-10, top: e.pageY-50});

    obj.animate({"top": "-=80px"}, 1000, "linear", function() {
        $(this).remove();
    }); 
    img.animate({"top": "-=80px"}, 1000, "linear", function() {
        $(this).remove();
    });

});

#coffeeButton{
	cursor: pointer; cursor: hand; background: #5EFF8F; border-radius: 7px; margin: 5px; padding: 20px; font: bold 30px Tahoma; text-align: left;
	-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -user-select: none;
}

#clone{
	font-size: 1.5em;
	font-weight: bold;
	color: white;
	-webkit-touch-callout: none;
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	-user-select: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img title = "" id="myImg" src="images/cup.png" style="display:none" width="20" height="30">
    		<div id="clone"></div>
			<div id = "coffeeButton">Make Coffee <br /><span id = "cookRate">1</span> Per Click</div>
			Coffee = <span id = "coffee">0.0</span>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

试试这个,确保在angular.js之前加载jQuery,然后将所有代码从$('#coffeeButton')更改为类似angular.element('#coffeeButton'),当与angular.js一起使用{{1 }被$替换为http://forum.ionicframework.com/t/use-ionic-with-jquery/1120/8

您可能需要将angular.element放在html文件中<script src="jquery.js"></script>之上。

<script type="text/javascript" src="js/app.js"></script>