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

首先对点击功能的代码进行分组：

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

jQuery切换脚本

2 个答案: