Question

我需要一个设计项目的文本弧形脚本（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/>

这次有效，但不是一次没有刷新 - 为什么？

Answer 1

<!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 Curving text with jQuery and CSS3

onclick事件在arctext脚本

1 个答案: