onclick事件在arctext脚本中仅工作一次 [英] onclick event works only once in arctext script
问题描述
我需要一个用于设计项目的文本弧形脚本(arctext).我已经添加了代码，并且在大多数情况下都可以正常工作.问题是，我在脚本中添加了一个onclick事件，并且只能运行一次.当您再次单击时，它什么也没做.
I need a text arcing script (arctext) for a design project. I have added the code and it works fine for the most part. The problem is, I have added an onclick event to the script and it only works once. When you click again, it does nothing.
我已经读了很多关于取消onclick和使用.click的知识，但是问题是，从事件运行的代码是将文本值分配给变量，然后使用该变量在弧文本脚本中设置弧半径.
I have read a lot about doing away with the onclick and using the .click instead, but the problem is that the code that runs from the event is to assign a text value to a variable, that is then used to set the arc radius in the arc text script.
这是我现在拥有的代码:
This is the code I have now:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<script>
function getrad(){
var R = document.getElementById("radius").value;
$().ready(function() {
$('#example').arctext({radius:R});
});
}
</script>
<input type="text" size="1" maxlength="3" id="radius" value=""><br/>
<input type="button" onclick"getrad()" value="Changearc"><br/>
这一次有效，但不刷新就不会一秒钟–为什么?
This works one time, but not a second without refreshing – why?
推荐答案
<!DOCTYPE html>
<html>
<head>
<title>Arctext on button click</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<script>
$(function(){
//initialize arctext
$('#example').arctext({radius :$('#radius').val()});
//set arc on button click
$('#set_arc').on('click', function() {
$('#example').arctext('set', {
radius : $('#radius').val(),
animation : {speed : 300}
});
});
});
</script>
</head>
<body>
<div style="margin:50px;">
<label>Radius: </label><input type="text" size="1" maxlength="3" id="radius" value="500">
<button id="set_arc">Change arc</button>
<div style="margin-top:50px;" id="example">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
</html>
来源: Arctext.js使用jQuery和CSS3弯曲文本
这篇关于onclick事件在arctext脚本中仅工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
