基础5:从topbar下拉锚点调用js函数

Question

也许我在这里很愚蠢，但我不知道如何用javascript函数响应Foundation 5 TopBar下拉选择。我想为我使用的库选择一个主题。为了设置主题，我需要调用一个js函数。

我拥有的是：

<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
    <section class="top-bar-section">
        <!-- Right Nav Section -->
    <ul class="right">
        <li class="has-dropdown">
            <a href="#">Theme</a>
            <ul class="dropdown" id="theme-dropdown">
                <li><a href="#">Light</a></li>
                <li><a href="#">Dark</a></li>
            </ul>
        </li>
    </ul>
    </section>
</nav>
</div>

这些当然包含在顶栏<nav>等中，并且顶栏上的下拉菜单在基本HTML模式下工作得很好。

我正在努力解决的问题是，如何使2个<li><a>元素（浅色和深色主题）在单击时调用我的JavaScript函数setTheme(themeName)？

我似乎找不到任何有人想从顶栏而不是URL调用js的例子。

Answer 1

看起来你没有使用JavaScript框架？如果你是，你应该研究一下这个框架是如何帮助你处理事件的。否则，这里有一些想法：

1.onclick属性

只要setTheme函数是全局定义的，就可以从列表项的onclick属性中调用它。

var span = document.querySelector('span');
function setTheme (themeName) {
  span.innerText = themeName;
}

<li onclick="setTheme('light')">Light</li>
<li onclick="setTheme('dark')">Dark</li>
Selected theme: <span>none</span>

2.addEventListener方法

如果函数setTheme不是全局的，请在函数范围内使用首选方法将元素作为目标，并使用addEventListener将事件处理程序附加到'click'事件。

var listElems = document.querySelectorAll('li');
[].forEach.call(listElems, function (elem) {
  elem.addEventListener('click', function () {
    console.log("HI");
    setTheme(this.dataset.value);
  });
});
var span = document.querySelector('span');
function setTheme (themeName) {
  span.innerText = themeName;
}

<li data-value="light">Light</li>
<li data-value="dark">Dark</li>
Selected theme: <span>none</span>

Answer 2

这对我来说是一个愚蠢的错误，因为我没有用这个初始化Foundation JS。。。

<script>
    $(document).foundation();
</script>

一旦我这样做了，@sdgluck给出的解决方案就很成功。