Question

我正在研究Unobtrusive JavaScript，建议将JavaScript与HTML分开。

在我的页面中，我将jQuery 1.9.1与jQuery Migrate plugin 1.1.1一起使用。我使用<li>来模拟我的页面的菜单。对于每个<li>，它是一个菜单项。最初我将JavaScript分配如下：

    <ul>
        <li onclick="showQ('0001')">Q 1</li>
        <li onclick="showQ('0002')">Q 2</li>
        <li onclick="showQ('0003')">Q 3</li>
        <li onclick="showQ('0004')">Q 4</li>
    </ul>

第一个问题：如何将其转换为不显眼的JavaScript？

JavaScript函数如下：

function showQ(id) {
  $('#' + id).show();
}

第二个问题：（这可能是一个jQuery问题）该函数如何引用原始<li>，例如：通过.addClass('some_css_class');添加课程？

Answer 1

更改每个id的{{1}}以包含您要传递到<li>函数的ID。在文档就绪处理程序中为showQ元素分配一个单击处理程序并从那里调用<li>函数，传入从单击的showQ中提取的id。在点击处理程序中，使用<li>引用点击的<li>以向其添加类

HTML

$(this)

的javascript

<ul>
    <li id="i0001">Q 1</li>
    <li id="i0002">Q 2</li>
    <li id="i0003">Q 3</li>
    <li id="i0004">Q 4</li>
</ul>

example

Answer 2

HTML：

<ul>
    <li>Q 1</li>
    <li>Q 2</li>
    <li>Q 3</li>
    <li>Q 4</li>
</ul>

JS片段：

$(document).ready(function(){


$('ul li').click(function(){


$(this).addClass('some_css_class');

});

}）;

编辑： 在您的功能代码中：

function showQ(id) {
  $('#' + id).show();
}

你要展示哪id？如果li与id不可见，您怎么能点击它？

在一系列按钮上不显眼的JavaScript

2 个答案: