javascript - 单击后将html对象传递给函数？

Question

我有一个我在代码后面制作的小列表，我有一个 onclick，当按下按钮时触发（用于按钮的标签）。我想知道如何将对象传递给我的 onclick 函数，以便切换它的类。所以像这样的东西：

   <script "text/javascript">
             function navButtonClick() {
                 $(this).toggleClass("is-open");

                alert("Yay!");

                 }
    </script>

另一个论坛上的一个人说代码应该可以工作，但似乎什么都没有发生..

这是我的后台代码写入 html 的内容：

  <div id="sidebar">
        <nav>
  <h2>Sites</h2>
  <ul id="navMenu">

     <li class="toggle"><a href="javascript:navButtonClick();">Stanislaus</a>
        <ul class="subnav">
           <li><a href="#" class="active">Bob</a></li>
       </ul>
    </li>
 </ul>

Answer 1

我通过 toggleClass 假设您正在使用 JQuery，因此您可以只使用 .on('click') 而不是尝试将其转换为函数调用，但如果将切换类分配给它会更容易a 元素而不是 li。

http://jsfiddle.net/22eYu/

$('a.toggle').on('click', function(){
    $(this).toggleClass("is-open");
    alert("yay");
});

Answer 2

只需传递this给onclick然后在函数中使用它。

演示：jsfiddle

JS：

<script "text/javascript"> 
    function navButtonClick(clicked) {
        $(clicked).toggleClass("is-open");

        alert("Yay!");
    } 
</script>

HTML：

<ul id="navMenu">
    <li class="toggle"><a href="javascript:void(0);" onclick="navButtonClick(this)">Stanislaus</a>

        <ul class="subnav">
            <li><a href="#" class="active">Bob</a>

            </li>
        </ul>
    </li>
</ul>

CSS：

.is-open{
    background-color: red;
}

但是，您似乎只需要以下 CSS：

CSS： 在这里放你的 CSS 类.is-open

a:visited {
    background-color: red;
}

Answer 3

您可能有范围界定问题。这行得通吗？

<script "text/javascript">
         window.navButtonClick = function(el) {
             $(el).toggleClass("is-open");

            alert("Yay!");

             }
</script>

...
<a href="#" onclick="window.navButtonClick(this);">Stanislaus</a>
...