Question

我在javascript中遇到了一个开关案例的问题。它在第一次加载页面时不起作用，但在它完美地工作之后，我找不到原因......

查看此fiddle

使用Javascript：

      $(".dial").knob({'draw' : function (v) {
                    rotate($('#el27'),this.v,false);


                                                     }});       
    $("#cont>div").each(function() {

                id = $(this).attr('data-id');
                rotate($(this),$(this).attr('data-angle'));
            });

        function rotate (element,degres) {

           var od = element.attr('data-angle');

            element.children(":first").css('transform','rotate('+ degres +'deg)')
                .css('-webkit-transform','rotate('+degres +'deg)')
                .css('-moz-transform','rotate('+degres +'deg)')
                .css('-ms-transform','rotate('+degres +'deg)')
                .css('-o-transform','rotate('+degres +'deg)');
                element.attr('data-angle',degres);
                if (od != element.attr('data-angle')){                
                width = element.width();
                height = element.height(); 
                element.css({'width':height,'height':width});
                };

            switch (degres){                
                    case 0:
                    case 360:
                     element.children(":first").css({
                       '-webkit-transform-origin': '',
                       '-o-transform-origin' : '',
                       '-ms-transform-origin': '', 
                       'transform-origin'    : '',
                        'position':'',
                        'width': element.width(),
                        'height' : element.height(),
                        'top': '',
                        'left': ''
                         });

                    break;
                    case 90:
                   element.children(":first").css({
                       '-webkit-transform-origin': 'top right',
                       '-o-transform-origin' : 'top right',
                       '-ms-transform-origin': 'top right', 
                       'transform-origin'    : 'top right',
                        'position':'absolute',
                        'width': element.height(),
                        'height' : element.width(),
                        'top': element.height() + parseInt(element.css('padding')),
                        'left': element.width() - element.height() + parseInt(element.css('padding'))
                        });
                    break;
}
        }

当windows load我可以在debbuger中看到开关未经过测试且没有问题

Answer 1

引用jQuery document ready

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（DOM）已准备好执行JavaScript代码。代码包括在内在$（window）.load（function（）{...}）里面会运行整个页面（图片或iframe），而不仅仅是DOM，已准备就绪。

Answer 2

在第一次运行（dom load）时，您将字符串传递给旋转功能（并且开关未找到匹配项），在拨号步骤中传递一个整数。您可以通过在此处调用parseInt来解决此问题（demo）：

$("#cont>div").each(function () {
  id = $(this).attr('data-id');
  rotate($(this), parseInt($(this).attr('data-angle'), 10));
});

切换案例不适用于页面加载javascript

2 个答案: