-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 呼び出しを実行するための省略形です。ここを見て、バニラ JavaScript で ajax 呼び出しを実行できることを確認してください。

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

これが、コードをバニラ JavaScript に書き直すのに十分役立つことを願っています

于 2013-07-19T06:27:15.460 に答える