如何从不同的`<li>`</li>同时调用和运行相同的函数

Question

如何使用javascript或jQuery从不同的<LI>同时调用和运行相同的函数。

我想使用不同参数的相同功能。我想像浏览器选项卡一样创建。多个选项卡同时加载。

Answer 1

（抱歉，我最初错过了jquery标签。）

使用jQuery：

HTML：

<ul id="mylist">
    <li>One</li>
    <li>Two</li>
</ul>

使用jQuery的JavaScript：

$("#mylist > li").click(function() {
    // Here, `this` refers to the raw DOM element.
    // If you want to know which one it is by index,
    // you can use $(this).index() (they start at 0).
    // Or you can store information on the element
    // using data-* attributes, and use
    // $(this).data(...)
});

Live example

---

当我错过了jquery标签（doh！）时的原始答案：

有DOM0方式：

<li onclick="doSomething(1);">One</li>
<li onclick="doSomething(2);">Two</li>

或者是不显眼的DOM0方式：

HTML：

<ul id="mylist">
    <li>One</li>
    <li>Two</li>
</ul>

JavaScript的：

var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
    if (li.nodeName.toUpperCase() === "LI") {
        li.onclick = makeCallback(++index);
    }
}
function makeCallback(val) {
    return function() {
        doSomething(val);
    }
}

或DOM2方式：

（相同的HTML。）

JavaScript的：

var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
    if (li.nodeName.toUpperCase() === "LI") {
        hookEvent(li, "click", makeCallback(++index));
    }
}
function makeCallback(val) {
    return function() {
        doSomething(val);
    }
}
function hookEvent(element, eventName, handler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }

Answer 2

尝试使用$ .each：

$(...).each(function(index, Element) {
    ...
});

请参阅：http://api.jquery.com/each/ 例如：

$(...).each(function(index, Element) {
    var target = $(this);
    target.click(function() {
        // when user click...
    });
    // something other logic...
});

Answer 3

    $('li').click(function(){ var target = $(this);// get your target element
});

Answer 4

有很多开箱即用的解决方案，例如jquery ui。如果你想手动完成，你可以很容易地做到。

jQuery标签： http://jqueryui.com/demos/tabs/

将您的内容区域命名为：

#main_0
#main_1
...

然后将选择器添加到LI 类似的东西：

var CurrentTabIndex = null;
$("li").live('click', function(e) {
  var TabIndex = $(this).index;
  var divName = "#main_" + TabIndex;


    $.ajax({
    url: "OpenTab.php",
    data: { TabId: TabIndex },      
    success: function (data) {            
        $(divName).html(data);
        $(divName).show();
        if(CurrentTabIndex != null)
        {
           $("#main_" + CurrentTabIndex).hide();
        }
        CurrentTabIndex = TabIndex;
    }
   });
  });

Answer 5

这是jquery方式：

$("li").click(function(){
  doSomething($(this).data('someValue'));
}); 

使用HTML保存参数。

<li data-someValue="one">One</li>
<li data-someValue="two">Two</li>

Answer 6

在rel元素中添加<li>属性，然后在<li>上调用该函数

$('li.your-class').bind('event_type', function(){
    var ref = $(this).attr('rel');
    // call your function
    myFunction(ref);
}