0

ドキュメントで作成されるブロックの配列があります。それらはマップ上の相互作用ポイントとして機能します。（背景として地図画像があり、ブロックは地図上の家の真上にあります）

for(blocks.length)
   var newblock = $("<span data-unit='" + blocks[i].unitnum + "' class='unitwrap' />");
   ....
   newblock.click(function() {...});
   newblock.hover(function() {
      ....
   }, function () {
      ....
   });
}

イベント関数で、スパン要素に背景画像を追加します。家の上にカーソルを置いたり、クリックしたりすると、エフェクトが作成されます。これはすべてうまくいきます...

IEを除いて

これらの Jquery 関数は IE で機能しませんか (ホバー アンド クリック)、それとも別のものですか?

4

1 に答える 1

0

スパンを表示するために、display:inline-blockここで CSS に高さと幅を指定します。jQuery で
この要素を作成した後、DOM のどこかに追加されます (ここでは例として)。ホバーしてクリックすると、ブラウザーのマウスハンドラーと対話できます (目に見えない要素は mouseevents を起動しません、論理 ^^ )、既に指定された要素 をパックした後jQueryへのセレクターとして、参照メカニズムが EventListener を DOM のどこにバインドするかを知るのに役立ちます<span>'body'
newblock$(newblock)

document.createElement('span')と同等の eventListeners を直接バインドすることはできません。常に$('<span />')DOM のどこかに配置する必要があります。つまり、リスナーを javascript 自体 (変数) にバインドすることはできませんが、dom 内のオブジェクトにはバインドできません。

そして、オブジェクト構造を確認するために、そのblocks小さな例を作成しました。

<style>
  .unitwrap {height:40px; width:40px; display:inline-block; border: 1px solid #f00}
</style>
<script type="text/javascript">
   var blocks=[{"unitnum":2},{"unitnum":4}];
   var l=blocks.length;
   for (var i=0;i<l;i++) {
       var newblock = $("<span data-unit='" + blocks[i].unitnum + "' class='unitwrap' />");
       $('body').append(newblock);
       $(newblock).click(function(){
         console.log('yeah clicked');
       });
       $(newblock).hover(function(){
         console.log('plop hovered');
       });
   }
</script>
于 2013-05-07T06:41:59.517 に答える