Coffeescript“点击”问题答案

【问题标题】：Coffeescript 'click' issueCoffeescript“点击”问题
【发布时间】：2014-06-09 04:32:44
【问题描述】：

我正在尝试使用 Coffeescript，但发现它非常令人沮丧。

我今天早些时候有这个脚本工作。我很确定一切都没有改变。

脚本是：

ready = ->
  class SortByLetter

    $('.letter').click ->
      selectedletter = $(this).text() 
      $('.location').hide()
      $("[id^="+selectedletter+"]").show()

$(document).ready(ready)
$(document).on('page:load', ready)

这个对应的rails位是：

 <div class="alphabet">
    <%@findletter.each do |letter|%>
    <div class="letter"><a href="#" onclick="return false;"><%=letter%></a></div>

 <%end%>
 </div>

提取并放置在“脚本”标签中时，输出工作正常。

<script>

    $('.letter').click(function() {
      var selectedletter;
      selectedletter = $(this).text();
      $('.location').hide();
      return $("[id^=" + selectedletter + "]").show();
    });


</script>

编辑：这是咖啡脚本的完整输出

(function() {
  var AjaxLocationSearch, SortByLetter, ready;

  ready = function() {};

  SortByLetter = (function() {
    var showall;

    function SortByLetter() {}

    $('.letter').click(function() {
      var selectedletter;
      selectedletter = $(this).text();
      $('.location').hide();
      return $("[id^=" + selectedletter + "]").show();
    });

    showall = $('.showall');

    showall.click(function() {
      return $('.location').show();
    });

    return SortByLetter;

  })();

如果有人可以向我解释我做错了什么，那就太好了！

【问题讨论】：

JavaScript error console 中的错误？如果您删除添加的任何内容，它会再次起作用吗？
你的 CoffeeScript 没有任何意义。您正在创建一个类但没有实例化它，您将代码扔到一个类中并期望发生一些有用的事情，这不是该 CoffeeScript 的完整 JavaScript 输出。我猜添加 class SortByLetter 是您最近所做的更改之一。
@Juhana 不，控制台中没有错误。确实，当点击这些字母时，没有任何呼叫发出。对不起，我应该说我已经删除了我后来插入的代码。还有其他建议吗？
@muistooshort 我以为我是通过使用“准备好”在页面加载时运行它来实例化该类？上课时上课就在那里-当我删除它时，仍然没有任何变化。我将编辑以显示完整的咖啡脚本输出。这只是我作为内联 JS 添加的输出，以检查它不是语法。还有其他想法吗？

标签： javascript ruby-on-rails coffeescript

【解决方案1】：

从您的编译输出中可以明显看出，您提供的 CoffeeScript 源代码没有反映一些缩进问题。尽管您的课程似乎在 ready 函数中缩进，但您的 ready 函数为空：

ready = function() {};

class SortByLetter 定义中的内容在 DOM 准备好之前立即执行，在$(document).ready 回调之外。这是你问题的根源。

说到你的class SortByLetter...它在那里做什么？如果您只是尝试调用单个函数，则没有理由创建一个类。您的 ready 处理程序应该是：

$ ->
  $('.letter').click ->
    selectedletter = $(this).text() 
    $('.location').hide()
    $("[id^="+selectedletter+"]").show()

就目前而言，您正在创建一个类，然后用它什么都不做。

【讨论】：