0

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

在我的页面中，我使用jQuery 1.9.1with 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>

第一个问题：如何将其分别转换为 Unobtrusive JavaScript ？

JavaScript 函数如下：

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

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

4

2 回答 2

1

更改ideach<li>以包含要传递给showQ函数的 id。在文档就绪处理程序中，为<li>元素分配一个点击处理程序并showQ从那里调用函数，传入从 clicked 中提取的 id <li>。在单击处理程序中引用单击的<li>使用$(this)以向其添加类

html

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

javascript

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

$(document).ready(function() {
    $("ul li").click(function() {
        var id = $(this).attr("id").substring(1);
        showQ(id);

        $(this).addClass("some_css_clas");
    });
});

例子

于 2013-03-21T09:00:22.277 回答
0

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你想展示哪个？如果liwith thatid不可见，你怎么能点击它？

于 2013-03-21T09:12:51.077 回答