0

私は流星アプリをやっています。データベースの詳細に基づいて Google マップに表示される動的なインフォボックスがいくつかあります。内部のデータが変更されたときに、インフォボックスのカスタム div に jquery 効果を与えようとしています。問題は、jquery 効果関数が機能していないことです。これは、div 要素の作成が完全に機能していないように見えるためです。setTimeout と Meteor.defer を使用してみましたが、まだ機能していません。この状況を克服するには？

Template.myTemplate.rendered = function() {

    //some code

    if (!rendered) {

        //map rendering code

        this.rendered = true;

    }

    for (var i = 0; i < count; i++) {

        //some code

        var elem = document.createElement("div"); //custom div to be used in infobox
        elem.id = i+'_div'; // id is dynamic
        elem.innerHTML = '<div><b>' +some_data +'</div>';

        var elemInfoBoxOptions = {
            content: elem,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-20, 0),
            zIndex: null, boxStyle: {opacity: 1, width: "100px"},
            infoBoxClearance: new google.maps.Size(1, 1),
            visible: true,
            pane: "floatPane",
            enableEventPropagation: false,
            closeBoxURL: ''
        };

        var elemInfobox = new InfoBox(elemInfoBoxOptions);
        elemInfobox.setPosition(new google.maps.LatLng(latitude, longitude));
        elemInfobox.open(map);

        $("#"+i+"_div").effect('highlight', {color: 'red'}, 1000); //Tried putting this code inside setTimeout and Meteor.defer. Did not work.

    }


};

ありがとう。

4

2 に答える 2

0

div見た目から、作成したばかりの変数によって参照される要素を強調表示したいelemので、試してください

$(elem ).effect('highlight', {color: 'red'}, 1000);

effectまた、が呼び出される前に要素が dom に追加されていることを確認してください。

更新: 更新されたコードに基づく

  1. 要素elemは dom ツリーに追加されません。次のように本体に追加する必要がある場合があります。$('body').append(elem)
  2. ID variabelelemIDはループ内で変更されないため、同じ ID を持つ複数の要素が作成されます - これは無効です
  3. セレクターは、実際の ID を保持する変数である$("#elemID")ID を持つ要素を探すため、間違っています。elemIDelemID$("#" + elemID)
于 2013-09-25T04:02:10.543 に答える