Question

在这个jquery代码中我试图将notes.php文件加载到div #inside1内的div #panel。现在当我点击div #flip时，div #panel应该切换。

我有jquery代码。但我需要在java脚本中使用相同的功能我怎么转换它？

代码：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
   $("#inside1").load("notes.php");
});
</script>

Answer 1

警告：下面的代码

var DOM = function (selector) {
    this.animate = function (prop, times, callbacks) {
        var el = document.querySelectorAll(selector);
        var animate = function (element, props, time, callback) {
            callback = callback || function () {};
            time = time || 1000;
            var timers = {}, // store the different interval timers so that they can be cancelled
            calls = 0, // numbers of times the call would have been called
                nprops = 0; // number of properties
            for (var prop in props) {
                (function (prop) {
                    var edit = prop == "scrollTop" ? element : element.style;
                    var stepCounter = [],
                        customStep = props[prop],
                        curr = edit[prop],
                        lastStepPercent = curr == "" ? (prop == "opacity" ? 1 : 0) : curr,
                        measure = prop == "scrollTop" || prop == "opacity" ? "" : "px",
                        stepper = function () {
                            edit[prop] = stepCounter[0] + measure;
                            stepCounter.shift();
                        };
                    if (props[prop].constructor == Number) customStep = [props[prop]];
                    for (var step = 0, len = customStep.length; step < len; step++) {
                        var from = parseInt(lastStepPercent),
                            to = parseInt(customStep[step]),
                            small = to < from,
                            numOfSteps = small ? from - to : to - from, // get current number of frames
                            multi = 30 * Math.round(parseInt(time) / 1000),
                            by = numOfSteps / (25 + multi) * len; // the stepper number

                        if (from == to) {
                            break;
                        }
                        for (var i = from; small ? i >= to : i <= to; i += small ? -by : by) {
                            stepCounter.push(i);
                        }
                        stepCounter.push(to);
                        lastStepPercent = customStep[step];
                    }
                    stepper();
                    timers[element + prop] = setInterval(function () {
                        stepper();
                        if (stepCounter.length == 0) {
                            clearInterval(timers[element + prop]);

                            calls++;
                            if (calls == nprops) {
                                callback.call(element);
                            }
                        }
                    }, time / stepCounter.length);
                    nprops++;
                })(prop);
            }
        };
        for (var i = 0; i < el.length; i++) {
            animate(el[i], prop, times, callbacks);
        };
        return new DOM(selector); // re-initiate "JavaScript class" for chaining
    }
};
var $ = function (selector) {
    return new DOM(selector);
};

window.onload = function () {
    document.getElementById("flip").onclick = function () {
        var panel = document.getElementById("panel");
        if (panel.style.height == 0) {
            $("#panel").animate({
                height: 100
            }, 2000); // thats kinda slow...
        } else {
            $("#panel").animate({
                height: 0
            }, 2000); // thats kinda slow...
        }
    };
    var request = window.XMLHttpRequest() ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    request.open("POST", "notes.php", true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.onreadystatechange = function () {
        if (request.readyState == 4 && (request.status == 200 || request.status == 0 /*Fixes a FF bug*/ )) {
            document.getElementById("inside1").innerHTML = request.responseText;
        }
    }
    request.send();
};

我使用了我之前创建的动画功能。请注意，这可能不起作用。这只是你的代码在没有jQuery的情况下可以获得多长时间的基本示例。它也可能不完全是你的jQuery代码所做的。我不打算整晚都在这上面，但我确实希望向你展示我放在一起的代码。

实际上有效：http://jsfiddle.net/shawn31313/jm8ZR/1/

我在示例中删除了AJAX调用。但是动画功能可能会变得很糟糕，所以请使用jQuery。

Answer 2

文档准备就绪后启动

不是使用$（document）.ready（），而是将它放在页面的底部，现在它将在加载之前的所有内容之后执行。

DOM元素选择

选择DOM元素可以使用

完成

 document.getElementById('someID');

点击活动

可以使用此

将click事件添加到div中

divTag.onclick = functionRef

滑动div

在div中设置新内容可能最好只更改htmlcontent，而不是滑动，因为这将更多编码。

从php文件加载信息

jquery中的$ .load（）函数是执行ajax调用的简写，看看这里看你可以在vanilla javascript中执行ajax调用

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

希望这有助于您将代码重写为vanilla javascript

如何将jQuery代码转换为Javascript函数

2 个答案: