【问题标题】:Javascript highlight and link url - Ruby on RailsJavascript 突出显示和链接 url - Ruby on Rails
【发布时间】:2013-01-20 10:00:39
【问题描述】:

我目前有一个表格,我用它来列出我的 RoR 应用程序中的一系列工作,如下所示:

<section id="table-wrapper">
  <table id="jobs">
    <thead>
      <tr>
        <td>position</td>
        <td>company</td>
        <td>location</td>
      </tr>
    </thead>
    <tbody>
      <% @jobs.each do |job| %>
        <%= link_to url_with_protocol(job.job_url), :target => '_blank' do %>
          <tr>
            <td><strong><%= job.title %></strong></td>
            <td><%= job.company %></td> 
            <td><%= job.city %>, <%= job.country %></td>
          </tr>
        <% end %>           
      <% end %>
    </tbody>
  </table>
</section>

我想要发生的是,当用户将鼠标悬停在表格行上时,字体会改变颜色,并且当他们单击该行时,它们会被发送到 job.job_url 方法当前正在传递的 Job URL。

我无法解决的是如何让它与 Javascript 集成?

非常感谢人们对此提供的任何建议和帮助:)

更新内容

#JS
$('table tbody tr').click(function(){
  <%= link_to job.job_url, :target => '_blank' do %>;
})


#HTML
<section id="table-wrapper">
  <table id="jobs">
    <thead>
      <tr>
        <td>position</td>
        <td>company</td>
        <td>location</td>
      </tr>
    </thead>
    <tbody>
      <% @jobs.each do |job| %>
        <tr>
          <td><%= job.title %></td>
          <td><%= job.company %></td>   
          <td><%= job.city %>, <%= job.country %></td>
        </tr>       
      <% end %>
    </tbody>
  </table>
</section>

这似乎仍然不起作用 - 你知道我哪里出错了吗?

【问题讨论】:

  • 您可以通过class、id和html属性与javascript进行交互。您的具体问题是什么?
  • 您好 Vinay,我希望在用户悬停时突出显示文本并链接整行(tr,而不是 td)并使用 javascript 单击。但是,因为它是 Ruby,我需要能够将 Job.job_url 传递到由 javascript 生成的 href 元素中。感谢您的帮助!

标签: javascript ruby-on-rails ruby-on-rails-3 hyperlink


【解决方案1】:

您可以使用 css 使用 :hover 选择器更改行的字体粗细。至于链接,你可以添加一个data-url属性并添加一些观察点击事件的js

# css
table tr:hover { font-size: 100px; }

# js
$('table tr').click(function() { window.location = $(this).data('url') })

# html
<table>
  <tr data-url='http://google.com'>
    <td>...</td>
  </tr>
</table>

更新:html 使用 job.job_url

假设你有@jobs上的工作列表

<table>
  <% @jobs.each do |job| %>
    <tr data-url='<%= job.job_url %>'>
      <td>...</td>
    </tr>
  <% end %>
</table>

更新:使用 href 而不是 data-url(尝试使用 data-url 时可能存在一些遗留问题)

对此的最终工作答案是:

$ ->
  $('tr[href]').click -> window.open 'http://' + $(this).attr('href');

【讨论】:

  • 您好 Jvnil,感谢您的回答。你知道我如何将 job.job_url 传递到 javascript 的 $(this).data('url') 部分,以便 JS 使用存储在我的数据库中的链接吗?干杯
  • 嘿,Jvnil,我尝试了 data-url= 设置,但似乎无法正常工作。我已经用它现在的样子更新了我的代码,这是我最关心的正确链接。你知道我可以如何修改以使其工作吗?非常感谢您的帮助!
  • 嗨,Tom,尝试复制我的第二个表(只需替换 td)并将您的 js 更改为我的 js。看看这是否有效。
  • 嘿,不幸的是,所有格式都正确,但是当我单击一行时,没有任何反应。我是否需要在那一行 Javascript 之前或之后放置一些东西才能让它使用 javascript,因为我现在确实有那行?干杯
猜你喜欢
  • 1970-01-01
  • 2011-11-24
  • 1970-01-01
  • 1970-01-01
  • 2012-03-08
  • 1970-01-01
  • 1970-01-01
  • 2013-09-14
  • 1970-01-01
相关资源
最近更新 更多