Question

我有一个约3项的清单。我想创建一个jquery函数，只要单击其中一个列表项就会触发该函数。然后，该函数应该能够使用html列表项的值或属性执行某些操作。因此，在下面的代码中，当我单击按钮2时，我会看到一个显示值为2的警告框。

<ul>
 <li class="myclick" id="1">Test Me</li>
 <li class="myclick" id="2">Test Me 2</li>
 <li class="myclick" id="3">Test Me 3</li>

 $.fn.myFunction = (function() {
          alert(this.id);
          });         
 $(function () {
       $(".myclick").click(function(){
                $().myfunction("Test");
      });

我知道这是一个非常基本的问题，但我在Jquery非常新，我正在尝试自学。

TIA

Answer 1

jsBin demo

// PLUGIN method
$.fn.myFunction = (function() {
   this.click(function(){
          alert(this.id);
   });
});   

$(function(){  // DOM READY

    $(".myclick").myFunction(); // BIND PLUGIN TO .myclick elements

});

P.S，如果有一天你害怕在某处使用prototype，...现在就试试，而不是fn使用prototype：D

您还可以使用命名函数：

function alertID() {
   alert(this.id);
}   

$(function(){

    $(".myclick").click( alertID );

});

Answer 2

您不必扩展jQuery来执行此操作..您可以使用任何旧的通用函数：

myFunction = function () { alert(this.id); }
$(".myclick").on('click', myFunction);

使用点击的元素作为上下文调用myFuntion。

如果您想使用已有的代码，则必须使用$(this).myFunction();代替$().myFunction

Answer 3

首先你不需要通过jQuery扩展来完成这个微小的任务。

这是你可以做的......

//looping through each li in ul
$('ul li').each(function(){
    //attach click event to li this refers to li here
    $(this).click(function(){
      //to alert ID of this list this refers to li here
     alert($(this).attr('id'));
      // to alert Text or html within li
     alert($(this).html());
    });
});

希望这会有所帮助

jquery中的可重用函数，如何传递调用项的值/ id？

3 个答案:

jsBin demo