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模式下效果很好。

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

我似乎无法找到任何人想要从顶部栏而不是URL调用js的示例。

Answer 1

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

<强> 1。 onclick属性

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强> 2。 addEventListener方法

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

这最终成了我的一个愚蠢的错误，因为我没有用这个初始化基金会JS ......

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

一旦我做了，@ sdgluck给出的解决方案就开始了。

基础5：从顶栏下拉锚点调用js函数

2 个答案: