Question

我刚刚开始使用Rails，我花了一整天时间试图找出这个问题。我创建了一个javascript文件放在javascript资源文件夹中，我的application.js也没有被触及，但我无法将其链接到我的html文件。代码本身工作正常，因为如果我将它放在<script>元素中，它就会执行。

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我尝试在另一个html文件中添加这个我的head元素，我试图让js工作。

 <%= javascript_include_tag 'application'%>

问题出在js文件本身。该脚本使用<script>工作正常，但在使用javascript include标记时，它会出现一个
未捕获的TypeError：无法读取未定义的属性'classList' 该错误来自

行

links[activeLink].classList.add("active");

...

var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style[transformProperty] = translateValue;

    link.classList.add("active");
}

//
// Dealing with Transforms
//
var transforms = ["transform",
            "msTransform",
            "webkitTransform",
            "mozTransform",
            "oTransform"];

var transformProperty = getSupportedPropertyName(transforms);

// vendor prefix management
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

无法在Rails中链接我的javascript文件

0 个答案: