JQuery Переключить Script

Question

У меня есть страница с различными таблицы, показывающие значения в сантиметрах и дюймах Первоначально мои таблицы заполняются дюйма

Существует кнопка, которую можно нажать, а затем она изменяет таблицу, чтобы показать значения в сантиметр

Как вы можете видеть, как мой код построен, это то, что каждая таблица будет иметь свою собственную кнопку для изменения дюймов в см и наоборот.

То, что я ищу, это щелчок по одной из кнопок, которая изменит все значения для всех таблиц. Если кто-то нажал кнопку, расположенную в таблице 2, чтобы увидеть сантиметры, измените все таблицы на сантиметры. Кнопка вложена в каждый из 4 DIV, содержащий мои таблицы. вы сделали бы это?

<a class="unitpicker on" href="#"></a> 

jQuery(document).ready(function(e) { 
    jQuery('#Laura .unitpicker').click(function(e) { 
    e.preventDefault(); 
    jQuery(this).toggleClass('on'); 
    jQuery('#Laura .imperial').toggle(); 
    jQuery('#Laura .metric').toggle(); 
}); 

jQuery('#Petites .unitpicker').click(function(e) { 
    e.preventDefault(); 
    jQuery(this).toggleClass('on'); 
    jQuery('#Petites .metric').toggle(); 
    jQuery('#Petites .imperial').toggle(); 
}); 

jQuery('#Plus .unitpicker').click(function(e) { 
    e.preventDefault(); 
    jQuery(this).toggleClass('on'); 
    jQuery('#Plus .metric').toggle(); 
    jQuery('#Plus .imperial').toggle(); 
}); 

jQuery('#PlusPetites .unitpicker').click(function(e) { 
    e.preventDefault(); 
    jQuery(this).toggleClass('on'); 
    jQuery('#PlusPetites .metric').toggle(); 
    jQuery('#PlusPetites .imperial').toggle(); 
}); 

Answer 1

JSBIN DEMO

jQuery(function($){ // DOM ready and secured $ alias 

    // Collect every button with class .unitpicker 
    var $unitBtns = $('.unitpicker'); 

    $unitBtns.click(function(e) { 
     e.preventDefault(); 
     $unitBtns.toggleClass('on');  // toggle class on every button 
     $('.imperial, .metric').toggle(); // swap names 
    }); 

}); 

Answer 2

Start, группируя код функции мыши:

jQuery(document).ready(function(e) { 
    jQuery('.unitpicker').click(function(e) { 
     e.preventDefault(); 
     jQuery(this).toggleClass('on'); 
     jQuery('#'+this.id+' .metric').toggle(); 
     jQuery('#'+this.id+' .imperial').toggle(); 
    }); 
});