问题

Question

问题

将多个函数堆叠在一起并尝试相互访问变量时，控制台返回未捕获的语法错误：意外的标记（

=============================================== ===

解释功能

$（window）.load（function（）{，同时加载所有函数。这是否正确使用？

功能toggleTabContent ：从设置功能中获取NavLink ID，并根据声明的变量currentNavSection的数据属性（data-sidebar-tab）切换主包装部分转到功能（转到说明）

功能设置：获取当前点击导航链接的ID（父级），作为高亮显示图标的海豚的导航元素：活动和悬停，并具有根据偏移滑动的侧边框。（在animateBorder中解释）

函数animateBorder ：使用设置函数中的函数currentNavElement来确定边框的偏移量。因此，var navPosition = $(currentNavElement).offset()。结果存储在名为navPosition的变量中。然后，一个名为navBorder的变量确定导航元素（链接的父级）的偏移量不能具有0的CSS顶级属性。

然后使用CSS属性“top”基于nav元素的偏移量（y）完成移动navBorder。

功能转到：获取当前活动的部分$（this），然后将其组合为“＃”+ 点击导航中的功能设置

已编辑的代码从@Dante

跟进

alert（currentNavElement）返回undefined。

这些功能是否按照原定的意图进行沟通？

 $(document).ready(function() {
setup(function(currentNavElement){
    toggleTabContent(currentNavElement);
    goto(currentNavElement);
    animateBorder(currentNavElement);
    alert(currentNavElement)
});
});

function toggleTabContent(currentNavElement) {
$("[data-sidebar-tab]").each(function(navPosition, currentNavSection) {
    $(currentNavSection).data("sidebar-tab") === currentNavElement ? $(currentNavSection).show() : $(currentNavSection).hide()
})
};
function setup(cb) {
$(document).delegate(".nav-element a", "click", function() {
    cb($(this).attr("id"));
})
};
function animateBorder(currentNavElement) {
    var navPosition = $(currentNavElement).offset(), 
    navBorder = !!(navPosition && navPosition.top >= 0) && navPosition.top;
if (!1 === navBorder) return !1;
    $("#nav-border").css('top', navBorder)
};
function goto(currentNavElement)  {
var currentNavSection = $("#"),
    currentNavSectiona = $("#" + currentNavElement + " a");
};

用于引用的HTML

            <ul id="nav-custom">
            <div id="nav-border"></div>
            <li id="nav-home" class="nav-element noselect">
                <a href="#" class="nav-permalink" data-permalink="content-home" data-lang-title="account_title" title="Home">
           <span class="text" data-lang="splash">Home</span>
           <i class="nav-icon material-icons">donut_large</i>
           </a>
            </li>
            </ul>
            <!-------------->
            SECTION EXAMPLE CODE
            <!-------------->
            <section id="content-home" class="content-style" data-sidebar-tab="home">
            </section>

原始JavaScript

$(window).load(function() {
    toggleTabContent: function(currentNavElement) {
        $("[data-sidebar-tab]").each(function(navPosition, currentNavSection) {
            $(currentNavSection).data("sidebar-tab") === currentNavElement ? $(currentNavSection).show() : $(currentNavSection).hide()
        })
    },
    setup: function() {
        $(document).delegate(".nav-element a", "click", function() {
            var currentNavElement = $(this).attr("id");
        })
    },
    animateBorder: function(currentNavElement) {
            var navPosition = $(currentNavElement).offset(), 
            navBorder = !!(navPosition && navPosition.top >= 0) && navPosition.top;
        if (!1 === navBorder) return !1;
            $("#nav-border").css('top', navBorder)
    },
    goto: function(currentNavElement) {
        $(".nav-element").removeClass("active");
        var currentNavSection = $("#" + currentNavElement),
            currentNavSectiona = $("#" + currentNavElement + " a");
    }
})

Answer 1

.load()它是触发事件时执行的函数。一旦加载了所有图像，就会调用处理程序。此方法在1.8中已弃用，并在3.0版本的jQuery中删除。您可以在此处阅读有关活动的更多信息 - jQuery Events

首先，我建议您在DOM准备就绪时使用.ready()函数来处理事件。

$(document).ready(function() {
  // Run code
});

@taplar在评论中提到的第二个时刻，function() {}它不是一个对象。您应该声明此功能以及何时使用它。

$(document).ready(function() {
  toggleTabContent(el);
});

function toggleTabContent(currentNavElement) {
  // Code here
};

您可以使用的另一种变体：

$(document).ready(function() {
  var methods = {
    toggleTabContent: function() {
      // Code here
    }
  };
  methods.toggleTabContent();
});

在此变体中，我们使用函数methods声明对象toggleTabContent。然后将其称为methods.toggleTabContent()。

有关您可以在此处阅读的对象的更多信息 - Working with objects

意外的令牌（从堆叠函数调用变量时

问题

解释功能

已编辑的代码从@Dante

用于引用的HTML

原始JavaScript

1 个答案: