Question

是否有像http://sharpkit.net/Live.aspx这样的工具可以将jquery转换为javascript？我有这里的方法，我必须转换为JavaScript，我正在寻求更多的信息，可以帮助我将jquery元素转换为javascript，如果有一个工具在www可以帮助将不胜感激，谢谢。

 addClass: function(element, className) {
                //$(element).addClass(className);
                //document.element.addClass(className);
                //element.addClass(className);
                element.(className)

            },
            removeClass: function(element, className) {
                $(element).removeClass(className);
            },
            toggleClass: function(element, className) {
                $(element).toggleClass(className);
            },
            css: function() {
                // read about the arguments object in javascript, very handy....
                // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
                var element = arguments[0];
                switch(arguments.length) {
                    case 2:
                        $(element).css(arguments[1]);
                        break;
                    case 3:
                        $(element).css(arguments[1], arguments[2]);
                        break;
                    default:
                        throw 'simpleQuery.css() called with bad arguments';
                }
            }

        };


/////////here is the modifications where I need some help with the conversion js to jquery in css portion

(function(exports) {
    'use strict';

    // Your task is to ditch the jQuery from here and just use pure javascript.
    // I'd recommend the Mozilla Web API Docs for Element (and google of course)
    // https://developer.mozilla.org/en-US/docs/Web/API/Element

    exports.simpleQuery = {
        addClass: function(element, className) {
            //$(element).addClass(className);
            //document.element.addClass(className);
            //element.addClass(className);
            element.classList.add(className)

        },
        removeClass: function(element, className) {
            element.classList.remove(className);
        },
        toggleClass: function(element, className) {
            element.classList.toggle(className);
        },
        css: function() {
            // read about the arguments object in javascript, very handy....
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
            var element = arguments[0];
            switch(arguments.length) {
                case 2:
                    $(element).css(arguments[1]);
                    break;
                case 3:
                    $(element).css(arguments[1], arguments[2]);
                    break;
                default:
                    throw 'simpleQuery.css() called with bad arguments';
            }
        }

    };
})(this);

Answer 1

我的同学Ming能够回答代码块的css部分;

css: function() {
// read about the arguments object in javascript, very handy....
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
var element = arguments[0];
switch(arguments.length) {
case 2:
var styles = arguments[1];

for (var property in styles) {
element.style[property] = styles[property];
}
break;
case 3:
element.style[arguments[1]] = arguments[2];
break;
default:
throw 'simpleQuery.css() called with bad arguments';
}
}

Answer 2

$(document).ready(function() {
    var waterVolume
    function initialFill(){
        waterVolume = Math.floor(Math.random() * (150000 - 50000 + 1)) + 50000
        initialWidth = $('.resizable_tank').width()
        initialHeight = $('.resizable_tank').height()
        stabilizeWaterPipe(initialWidth,initialHeight)
    }

function stabilizeWaterPipe(currentWidth,currentHeight) {
    stableHeight = $('.resizable_tank_pipe').offset().top + $('.resizable_tank_pipe').height() + 8
    $('.stable_tank_pipe').css({height: (stableHeight-400)+"px", bottom: "-"+(stableHeight-400)+"px"})
    stabilizeCalc(currentWidth,currentHeight)
}

function stabilizeCalc(currentWidth,currentHeight) {
    stableTankWidth = $('.stable_tank').width()
    stableTankHeight = $('.stable_tank').height()
    increasedHeight = parseFloat(currentHeight - stableTankHeight)

    // I'm getting problem here to fill the water and transfer it to the cylinder in which it makes both the cylinder makes equal water level would u pls help me with some code.
}

$('.resizable_tank').resizable({
    handles: 'e,s,se',
    maxWidth: 800,
    minWidth: 180,
    minHeight: 400,
    resize: function(event, ui) {
        var currentWidth = ui.size.width;
        var currentHeight = ui.size.height;
        stabilizeWaterPipe(currentWidth,currentHeight)
    }
})

initialFill()

});

Answer 3

尝试这个guid，它解释如何转换： https://github.com/jackocnr/intl-tel-input/wiki/Converting-jQuery-to-JavaScript

在线Jquery到Javascript工具？

3 个答案: