1

こんにちは、マップを含む div があります。ユーザーがマウスオーバーすると、幅が 80% から 50% に変更され、右側に表示される画像に対応できるように、右側にスペースが作成されます。

jquery イベント処理の例をオンラインでいくつか見て、そこで見たものを自分のアプリに取り入れようとしました。ただ、マウスオーバーしても反応がないので、よくわからなかったと思います。Web開発、レール、jqueryが初めてなので、エラーの診断に手を貸してください。

以下は、私の Rails プロジェクトの関連ファイルです。

list.html.erb - すべての HTML が含まれています

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<script type="text/javascript"  
src="http://maps.googleapis.com/maps/api/js?key=Q&sensor=false"></script>  
<%= stylesheet_link_tag 'application' %>  
<%= javascript_include_tag 'application'%>  
<%= stylesheet_link_tag 'listings' %>  
<body onload="initialize()">  
    <div id="control_panel">  
    <input type="button" onclick="getlistings();" value="Add Markers">  
    <input type="button" onclick="clearMarkers();" value="Remove Markers">  
    </div>  
    <div id="info"></div>  
    <div id="map_canvas" onmouseover="moveLeft();" ></div>  
</body>

map.js.erb - javascript および jquery 関数が含まれています

function moveLeft()  
{  
    $(function(){ $("#map_canvas").bind("mouseover", shiftLeft) });  
    $(function(){ $("#map_canvas").bind("mouseleave", shiftLeft) });  
}  

function shiftLeft(evt)  
{  
    $("#map_canvas").toggleClass("shifted_mapCanvas");  

}

css ファイル:

#map_canvas  
{  
  width: 90%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html   
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  

}

.shifted_mapCanvas  
{  
  width: 50%;  
  height: 90%;  
  margin-left: auto;  
  margin-right: auto;  
  html    
  {   
    height: 100%   
   }  
  body   
  {   
    height: 100%;   
    margin: 10;   
    padding: 10   
   }  
}
4

1 に答える 1

1

尋ねた質問だけに答えるために、jQuery 関数 ( $("#map_canvas").bind("mouseover", shiftLeft)) を呼び出していますが、jQuery をどこにロードしましたか?

また、JavaScript 呼び出しをインラインでトリガーしようとしていますが、これは絶対に推奨される方法ではありません。代わりに、次を使用した場合、jQuery がロードされていると仮定します。

<script>
$('div#map_canvas').hover({
  function() { $(this).toggleClass('shifted_mapCanvas'); },
});
</script>

...うまくいくはずです。hover( )とtoggleClass()のドキュメントを参照してください

他のいくつかの問題をカバーするには：

盗賊王、敬意を表して、最初に戻って最初からやり直す必要があります。ここ数日、(1) HTML、(2) CSS、(3) Rails の基本レベルを理解していないことを示すいくつかの質問を投稿しました。

ここに私が言うことができる方法があります：

1) ほとんどの場合、 と呼ばれる Rails ビューを持ってはいけません。list.html.erbおそらくviews/lists/show.html.erbまたはであるはずviews/lists/index.html.erbです。Railsガイドのリソースの作成を参照してください。

2) Rails ビューには body タグを含めるべきではなく、おそらく meta タグや script タグも含めるべきではありません。body タグはレイアウトに属します。そうしないと、すべてのビューでそのタグを繰り返して、各ビューに本文があることを確認する必要があります。そうしないと、ページに無効なマークアップが表示されます。

3) スタイルシートは CSS ではなく SCSS です。これは、DOM ではまったく意味をなさないことをしようとしていることを除けば問題ありません。HTML および BODY タグのスタイルをネストしています。これらは、ネストしている div の外側にある必要があります。つまり、作成している SCSS は、完全に無効。

2 と 3 については、How to Make a Simple Valid HTML Document を参照してください。

邪魔にならない JavaScriptについても続けることができますが、ここまでで理解できたと思います。

バックアップして、HTML とは何か、そしてその仕組みを学ぶことから始める必要があります。HTML、CSS、およびJavaScriptについては、W3C Schools から始めることをお勧めします。

次に、Michael Hartl のRails 3 Tutorialを読んでください。オンラインで無料で行うか、本のコピーを購入できます。

最初の 3 つのチュートリアルはそれぞれ数時間しかかからず、Rails のチュートリアルはおそらく 1 日か 2 日で完了します。これらのそれぞれに順番に取り組むと、今求めている種類の質問に数週間または数か月の苦労を省くことができます.

最初にこれらの基本に取り組んでから、現在取り組んでいるプロジェクトに戻ることを強くお勧めします。

于 2012-04-22T16:13:46.367 に答える