0

私は小さな広告スクリプトの作成に取り組んでいます。

次のスクリプトを挿入することにより、広告がページに挿入されます。

<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=1&x=auto&y=auto&loadAd=?"></script>
<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=2&x=auto&y=auto&loadAd=?"></script>
<script class="gd-ad-script" src="http://domain.dk/ads/gdAds.js?adID=3&x=auto&y=auto&loadAd=?"></script>

これにより、ページに3つの広告が挿入されます。adIDが設定されているため、ランダムな広告ではなく、特定の広告を選択する必要があります。

これが私のスクリプトです：

/*! jQuery v1.8.3 jquery.com | jquery.org/license */
// * jQuery libary here * //


$(document).ready(function(){
var count = 0;

var JSONurl = 'http://domain.dk/ads/loadAd.php?callback=?';

$('.gd-ad-script').each(function(){

    var adSrc = $(this).attr('src');

    var adID = adSrc.substring(adSrc.indexOf('?adID=') + 6, adSrc.indexOf('&x='));
    var x = adSrc.substring(adSrc.indexOf('&x=') + 3, adSrc.indexOf('&y='));
    var y = adSrc.substring(adSrc.indexOf('&y=') + 3, adSrc.indexOf('&loadAd=?'));

    var JSONdata = 'domain=' + window.location.hostname + '&adID=' + adID + '&xres=' + x + '&yres=' + y;

    $(this).attr('id', 'add-current-ad' + adID);

    $.getJSON(JSONurl, JSONdata, function(serverResponse) {
        ++count;
        if (count == 1) {
            alert(adID); // Comment this line out, unless testing
            $('head').prepend(serverResponse.cssReset);
            $(serverResponse.adContent).insertAfter('#add-current-ad' + adID);
            $('#add-current-ad' + adID).remove();
        }
    });

});

});

さて、私は3つのスクリプトがオンになっているページを期待し、medに3つのアラートボックスを順番に表示します。1、2、3。ただし、これはすべて、私のajax呼び出しからのサーバー応答の速度に依存するため、完全にランダムです。

その結果、広告は1、2、3ではなくランダムな順序で配置されます。

私の最初の考えは、セレクターとして.gd-ad-script：firstを使用して、各スクリプトが1つの広告のみを処理するようにすることでしたが、最初の広告スクリプトが削除されるまで、なんらかの方法ですべてを遅らせる必要があることに気付きました。これは望ましくありません。 ..。。

何か良いアドバイスはありますか？

4

1 に答える 1

0

順序が間違っているのは、スクリプトが実行していると思っていることを実行していないためだと思います。

異なる GET パラメータを使用して、スクリプトを 3 回インクルードしています。

(注: これにより、ブラウザはサーバーからスクリプトを 3 回ダウンロードしますが、毎回同じスクリプトであるため、これは不要です。)

私が何かを見逃していない限り (count変数を使用して行っていることが非常に混乱しているように見えるため)、スクリプトを 3 回実行すると、3 つの <script>要素すべてがループされ、同じ最初の<script>要素が処理されます。<script>すでに処理された要素を識別できるものは何もありません。

私見では、コンセプト全体を再考する必要があります。

  • スクリプトが一度だけダウンロードされていることを確認してください。
  • 3 回実行してそれぞれ独自の広告を処理し、すべてをループしないか、 1 回実行してすべての広告をループします。
  • 正しい要素の後に広告を添付してください。そうすれば、AJAX リクエストのカムバックの順序は問題になりません。

個人的には、スクリプトを 3 回ではなく 1 回だけ含めて、広告の位置を他の要素でマークします。このようなもの：

<script src="http://domain.dk/ads/gdAds.js"></script>
<div data-ad-id="1" data-ad-x="auto" data-ad-y="auto"></div>
<div data-ad-id="2" data-ad-x="auto" data-ad-y="auto"></div>
<div data-ad-id="3" data-ad-x="auto" data-ad-y="auto"></div>

（テストされていない）：

$(document).ready(function(){
    var JSONurl = 'http://domain.dk/ads/loadAd.php?callback=?';


    $('[data-ad-id]').each(function(){

        var ad = $(this);
        var adID = ad.data('ad-id');
        var x = ad.data('ad-x');
        var y = ad.data('ad-y');

        var JSONdata = 'domain=' + window.location.hostname + '&adID=' + adID + '&xres=' + x + '&yres=' + y;

        $.getJSON(JSONurl, JSONdata,
            (function(ad) {
                    function(serverResponse) {
                        $('head').prepend(serverResponse.cssReset);
                    $(serverResponse.adContent).insertAfter(ad);
                    ad.remove();
                }
            })(ad) 
        );
    });
});
于 2012-12-13T10:29:36.547 に答える