Question

在网站上使用Magic Line，它在主页上运行良好。添加了另一个页面，魔术线不再有效。 dev检查中显示的错误是：

未捕获的TypeError：无法读取属性＆＃39; left＆＃39;未定义的。

该网站是一个带有Divi儿童主题的wordpress网站。 javascript文件已在子主题$(document).ready(function() { var $el, leftPos, newWidth, ratio, origLeft, origRatio, origWidth = 100, $mainNav = $("#nav"); $mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line"); origLeft = $(".current_page_item a").position().left; newWidth = $(".current_page_item").width(); origRatio = newWidth / $magicLine.width(); $magicLine .css("transform", "translateX("+origLeft+"px) scaleX("+origRatio+")"); $("li").not("#magic-line").hover(function() { $el = $(this).find("> a"); leftPos = $el.position().left; newWidth = $el.parent().width(); ratio = newWidth / origWidth; $magicLine .css("transform", "translateX("+leftPos+"px) scaleX("+ratio+")"); }, function() { $magicLine .css("transform", "translateX("+origLeft+"px) scaleX("+origRatio+")"); });});文件中排队。

Javascript是：

<div id="navContainer">
<a href="#">
  <div id="logo" class="hvr-bounce-in">
    <img id="mamboLogo" src="mamboLogo.png">
      <div class="logoText">
        <h1 class="title">Mambo Media</h1>
        <p class="tagLine">Film and Animation</p>
      </div>
  </div>
</a>
<div class="nav-wrap">
  <ul class="group" id="nav">
    <li class="nav-item current_page_item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Team</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
  </ul>
</div>

html是：

{{1}}

任何帮助都会很棒。

Answer 1

在阅读了另一个问题后解决了这个问题。 javascript很扎实，问题是没注意到html。在没有工作的页面上没有为活动链接正确指定class。 noob错误。

Magic Line＆amp; jQuery origLeft未定义在主页上工作而不是其他页面

1 个答案: