Есть ли более простой способ ссылки на исходный элемент для события?

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");
     }
    });
}

Мне в основном интересно, есть ли более аккуратный способ ссылки на элемент источника вместо необходимости передавать два идентификатора в мою функцию?

Answer 1

Используйте «это» внутри события. Обычно в 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;
});

edit: изменен скрипт для использования атрибута name и добавлен возврат false в обработчик кликов.

Answer 3

Я уверен, что это не отвечает на ваш вопрос, но есть отличный плагин для расширения строк таблицы, может быть полезно проверить это:

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