onclick事件在arctext脚本中只能工作一次

onclick event works only once in arctext script

本文关键字：工作 一次 事件 arctext 脚本 onclick      更新时间：2023-09-26

我需要一个用于设计项目的文本弧形脚本（arctext）。我已经添加了代码，它在大多数情况下都很好用。问题是，我在脚本中添加了一个onclick事件，它只工作一次。当您再次单击时，它不会执行任何操作。

我读过很多关于取消onclick而改用.click的文章，但问题是，从事件运行的代码是为变量分配一个文本值，然后用于设置圆弧文本脚本中的圆弧半径。

这是我现在的代码：

  <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/>

这一次有效，但一秒钟都不会刷新–为什么？

<!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">&nbsp;&nbsp;&nbsp;                      
        <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 绘制文本

相关文章：