1

嗨，我有一个包含地图的 div。当用户将鼠标悬停时，我希望它的宽度从 80% 更改为 50%，在右侧创建空间，以容纳将出现在右侧的图像。

我在网上查看了一些 jquery 事件处理的示例，并尝试将我在那里看到的内容整合到我自己的应用程序中。但是，我认为我没有完全正确，因为鼠标悬停没有响应。有人可以帮我诊断错误，因为我是 web 开发、rails 和 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.erbor views/lists/index.html.erb。请参阅Rails 指南中的创建资源。

2) Rails 视图不应该包含 body 标签，并且可能不应该包含 meta 或 script 标签。body 标签属于您的布局，否则您将不得不在每个视图中重复该标签以确保每个视图都有一个正文，否则您的页面上将有无效的标记。

3) 您的样式表是 SCSS，而不是 CSS，这很好，只是您尝试做的事情在 DOM 中完全没有意义。您正在嵌套 HTML 和 BODY 标记的样式，它们必须在嵌套它们的 div 之外......换句话说，您正在创建的 SCSS 正在为 HTML 元素提供不可能的 CSS 定义，这些定义完全无效的。

对于 2 和 3，请参阅如何制作简单有效的 HTML 文档。

我也可以继续讨论不显眼的 javascript，但现在我想你明白了。

您需要备份并首先了解 HTML 是什么以及它是如何工作的。我建议从 W3C 学校开始学习HTML、CSS和JavaScript。

然后，阅读 Michael Hartl 的Rails 3 教程。您可以在线免费或购买书籍副本。

前三个教程每个应该只需要几个小时，Rails 教程大概可以在一两天内完成。如果您按顺序完成其中的每一个，您将节省数周甚至数月的时间来解决您现在提出的问题。

我强烈建议您先完成这些基础知识，然后再回到您正在从事的项目。

于 2012-04-22T16:13:46.367 回答