Question

我是整个JavaScript和jQuery编码的新手，但我现在正在做的是我的HTML：

<a id="tog_table0" 
  href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a>

然后我有一些稍微笨重的代码来调整元素：

function toggle_table(button_id, table_id) {
         // Find the elements we need
         var table = $(table_id);
         var button = $(button_id);
         // Toggle the table
         table.slideToggle("slow", function () {
         if ($(this).is(":hidden"))
     {
    button.text("show");
     } else {
       button.text("hide");
     }
    });
}

我主要想知道是否有更简洁的方法来引用源元素，而不是必须将两个ID传递给我的函数？

Answer 1

在活动中使用'this'。通常在jQuery中，这指的是调用处理程序的元素。

还尝试避免标记中的内联脚本事件处理程序。最好将这些事件挂钩到文档就绪中。

NB 下面的代码假设调用处理程序的元素（链接）在表中，因此它可以使用最近的遍历到它。情况可能并非如此，您可能需要使用其他一个遍历选项，具体取决于您的标记。

$(function(){ 
   $('#tog_table0').click( toggle_table )
});

function toggle_table() {
   //this refers to the element clicked
   var $el = $(this);
   // get the table - assuming the element is inside the table
   var $table = $el.closest('table');
   // Toggle the table
   $table.slideToggle("slow", function () {
       $el.is(":hidden") ? $el.text("show") : $el.text("hide");
   }
}

Answer 2

你可以这样做：

<a href="" name="#hideable_table0" class="tableHider">show</a>

并将您的javascript更改为：

$('a.tableHider').click(function() {
    var table = $(this.name); // this refers to the link which was clicked
    var button = $(this);

    table.slideToggle("slow", function() {
        if ($(this).is(':hidden')) { // this refers to the element being animated
            button.html('show');
        }
        else {
            button.html('hide');
        }
    });

    return false;
});

编辑：更改了脚本以使用name属性，并向点击处理程序添加了返回false。

Answer 3

我确定这不会回答你的问题，但是有一个非常好的插件用于扩展表行，可能对查看它很有用：

http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx

有没有更简单的方法来引用事件的源元素？

3 个答案: