单击后将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

我假设你在使用JQuery的toggleClass，所以你可以使用.on（'click'）而不是试图将它变成函数调用，但是如果你分配了它，它会更容易将类切换为a元素而不是li。

http://jsfiddle.net/22eYu/

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

Answer 2

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

DEMO： 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>
...