jQuery在值更改时设置了fontsize奇怪的行为

jQuery set fontsize on change of value Strange behaviour

本文关键字：fontsize 设置 jQuery      更新时间：2024-02-15

我正在尝试使用jQuery和Angular js更改段落的字体大小。

每当用户更改字体大小时，p标签的字体大小都将更改，它运行良好。但有一个小错误，即每当用户设置值时，字体大小都会发生变化。但如果他减小值，字体大小不会减小而是增大，反之亦然，许多类似的行为都会发生。

这是我的代码：

 <!DOCTYPE html>
<html>
<head>
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
             <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

      <style>
          p{
              height: 600px;
              width: 600px;
              font-size:17px;  
          }

      </style>
    </head>
    <body>

           <div ng-app="myApp" ng-controller="editor">
            <label for="kys_font_size"> font size:</label>
            <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)">
               </select>   

          </div>

     <p contenteditable="true"  id="content" >

        </p>

         <p></p>
         <script>
           var app = angular.module('myApp',[]);
             app.controller('editor',function($scope){
                 $scope.FontSize = function(start, end) {
                                      var size = [];
                                       for (var i = start; i <= end; i++) {
                                       size.push(i);
                                       }
                            return size;
                      };

                    $("#fontsize").on('change',function(){
                          $("#content").css("fontSize",$scope.kys_selected_font+"px");
                    });
             });
         </script>
    </body>

</html>

它正在工作。。。

你必须使用ng-change。。。

<!DOCTYPE html>
<html>
<head>
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
             <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

      <style>
          p{
              height: 600px;
              width: 600px;
              font-size:17px;  
          }

      </style>
    </head>
    <body>

           <div ng-app="myApp" ng-controller="editor">
            <label for="kys_font_size"> font size:</label>
            <select ng-model="kys_selected_font" id="fontsize" name="kys_font_size" ng-options="page for page in FontSize(1, 150)" ng-change="update()">
               </select>   

          </div>

     <p contenteditable="true"  id="content" >

        </p>

         <p></p>
         <script>
           var app = angular.module('myApp',[]);
             app.controller('editor',function($scope){
                 $scope.FontSize = function(start, end) {
                                      var size = [];
                                       for (var i = start; i <= end; i++) {
                                       size.push(i);
                                       }
                            return size;
                      };
           $scope.update = function(){
              $("#content").css("fontSize",$scope.kys_selected_font+"px");
            }

             });
         </script>
    </body>

</html>
相关文章：