-5

在这个 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>
4

2 回答 2

4

警告：下面的丑陋代码

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。

于 2013-07-19T06:28:07.790 回答
0

文件准备好后开始

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

DOM 元素选择

选择 DOM 元素可以使用

 document.getElementById('someID');

点击事件

点击事件可以通过使用这个添加到一个 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 有所帮助

于 2013-07-19T06:27:15.460 回答