jquery/coffeescript 在页面加载时有条件隐藏答案

【问题标题】：jquery/coffeescript conditional hide on page loadjquery/coffeescript 在页面加载时有条件隐藏
【发布时间】：2015-12-05 19:53:05
【问题描述】：

我想根据另一个元素“#init-like”的值在页面加载时隐藏或显示一个元素。

if $('span[id^="init-like"]').html() == "true"
  $(this).parent().find('span[id^="like-click"]').hide()

它不起作用，因此在进行故障排除时，我让它隐藏或单击显示。那行得通。

$('span[id^="init-like"]').click ->
  if $(this).html() == "true"
    $(this).parent().find('span[id^="like-click"]').hide()

我想我在这里遗漏了一些基本的东西，因为我不明白为什么它在页面加载时不起作用。我已经成功地在页面加载时隐藏了其他元素，但不是有条件地隐藏其他元素。

如果相关，我的咖啡脚本的顶部和底部是这样的，这有助于 turbolinks 和 jquery 一起工作：

ready = ->
  $(document).ready ->
####
$(document).ready(ready)
$(document).on('page:load', ready)

我的总体目标是让“喜欢”按钮显示一个项目是否未被喜欢；如果一个项目被喜欢，它会被隐藏；反之亦然，使用“不喜欢”按钮。

如果更多代码 sn-ps 会有所帮助，请告诉我。

编辑：代码是部分的，所以我必须确保咖啡脚本不只应用第一个实例。

【问题讨论】：

标签： jquery ruby-on-rails coffeescript

【解决方案1】：

问题是：当您不在处理程序中时，您正在使用$(this)，因此$(this) 实际上是$(window)。 $(window).parent() 因此是空的（window 没有父级）并且.find() 找不到任何到.hide() 的内容。

所以只需使用$('span[id^="init-like"]').parent().find('span[id^="like-click"]').hide() 即可完成与点击处理程序中相同的操作：

if $('span[id^="init-like"]').html() == "true"
  $('span[id^="init-like"]').parent().find('span[id^="like-click"]').hide()

_{注意：如果您的元素的 id 正好是 init-like 等，请使用 $('#init-like') 作为选择器：这比使用 [id^=...] 更快（这意味着 id 以某些东西开头）}

【讨论】：

谢谢@Markus！我遗漏了一个重要的事实：代码是部分的，所以我必须确保咖啡脚本不仅仅适用于第一个实例。我将在下面的答案中发布我最终使用的代码，该代码现在正在运行。

【解决方案2】：

我缺少的是（正如 Markus 指出的那样）我不在处理程序中，所以我的“this”不起作用。

起初，我添加了点击页面加载。那在下面并且工作正常；但感谢 Marko 对 this question 的回答，我想出了一种我认为更优雅的方法（考虑到在页面加载时“点击”是多么不雅，这并没有说太多）。

我欢迎任何改进建议，但内联 jQuery 非常适合我的目的。

方法#1。内联 jQuery：

<span class="working-<%= list.job_id %>"></span>

<span class="like-or-not-<%=current_user.likelists.pluck(:list_id).exclude?(list.id)%>"><%= link_to "+", likelist_path(:list_id => list.id, :user_id => current_user.id), :remote => true %></span>
<span class="like-or-not-<%=current_user.likelists.pluck(:list_id).include?(list.id)%>"><%= link_to ":)", likelist_delete_path(:list_id => list.id, :user_id => current_user.id), :remote => true %></span>

<script type="text/javascript">
    $(".like-or-not-false").hide();
    $(".working-1").parent().hide();
</script>

如果用户赞了一个列表，那么允许用户点击和赞一个列表的 span 的类将被隐藏。如果用户不喜欢某个列表，则允许用户点击和不同列表的 span 的类将被隐藏。

我使用类似的方法来隐藏当前属于未完成作业的列表，因为当作业完成时list.job_id 为 nil。

方法 #2（劣势且已被放弃）。 “点击”页面加载：

$('span[id^="init-like"]').click ->
  if $(this).html() == "true"
    $(this).parent().find('span[id^="like-click"]').hide()
  else
    $(this).parent().find('span[id^="unlike-click"]').hide()
$('span[id^="init-like"]').click()

【讨论】：