Question

我有一个＆＃34; tb-learn-more-link＆＃34;类的链接。当我将鼠标悬停在一个上面时，我想显示一个带有＆＃34; tb-description＆＃34; （或在移动视图中......＆＃34; tb-description-mobile＆＃34;）。

当我加载我的页面时，javascript会抛出一个错误＆＃34; Uncaught TypeError：无法设置属性＆＃39; onmouseover＆＃39;未定义＆＃34;。另外，我对javascript很陌生，所以如果有更少的代码行可以做到这一点，那么这将是有帮助的。

$(document).ready(function () {
  var e = document.getElementsByClassName('tb-learn-more-link');
  var d = document.getElementsByClassName('tb-description');
  var m = document.getElementsByClassName('tb-description-mobile');

  e[0].onmouseover=function() { d[0].style.display = "inline"; }
  e[1].onmouseover=function() { m[0].style.display = "block"; }
  e[0].onmouseout=function() { d[0].style.display = "none"; }
  e[1].onmouseout=function() { m[0].style.display = "none"; }
});

Answer 1

此错误表示在DOM就绪代码运行时，页面上的类名tb-learn-more-link只有少于两个的元素。如果您没有，则e[0].onmouseover = ...行失败，因为e[0]为undefined。如果您只有两个，那么e[1].onmouseover = ...行就会失败，因为e[1]是undefined。

我只想指出，当你使用jQuery时，你可以充分利用它：

$(document).ready(function () {
  // Hook the event on `document` but trigger only when it happens on `.tb-learn-more-link`
  $(document)
    .on("mouseover", ".tb-learn-more-link", function(e) {
      if ($(this).index(".tb-learn-more-link") === 0) {
        $(".tb-description").css("display", "inline");
      }
      else {
        $(".tb-description").css("display", "block");
      }
    })
    .on("mouseout", ".tb-learn-more-link", function() {
      $(".tb-description, .tb-description-mobile").css("display", "none");
    });
});

这样，以后添加元素无关紧要。

请注意，在上面，我使用index，这有点粗糙。如果可以从正在悬停的.tb-description元素导航到要显示的相关内容，那就更好了。

如果它可以在CSS而不是代码中处理（更好的是它取决于你的标记，元素如何相互关联），如果你不需要支持IE7及更早版本，那就更好了。

Javascript错误“无法设置未定义的属性'onmouseover'

1 个答案: