javascript - 有没有更短的方法来编写这个 jquery 切换代码？

Question

    $('#checkout #button-method').on('click', function() {
        $('#button-info').removeClass('pressed').addClass('pointer');
        $('#button-method').addClass('pressed').removeClass('pointer');     
        $('#shipping-info').addClass('hide');
        $('#shipping-method').addClass('add');
    });
    $('#checkout #button-info').on('click', function() {
        $('#button-info').addClass('pressed').removeClass('pointer');
        $('#button-method').removeClass('pressed').addClass('pointer');     
        $('#shipping-info').removeClass('hide');
        $('#shipping-method').removeClass('add');
    });

“指针”类的 CSS 是游标:指针；对于类“按下”是背景颜色的变化；对于类“隐藏”是显示:无；对于类“添加”是显示: block

有 2 个按钮(按钮方法和按钮信息)。单击按钮方法时，按钮信息被禁用，运输信息隐藏，运输方法出现。单击按钮信息时，会发生相反的过程。有没有办法在两个不同的元素上使用 toggleClass 来压缩此代码？

Answer 1

更新:4 行 jQuery。

当然还有更好的办法。从我的 Angular 来看，这是最好的方法。

在这里检查代码:http://jsfiddle.net/ALsYT/10/

我所做的是将它们放在一个“按钮”var 中，并且由于其中一个开始隐藏，所以您必须在加载时执行此操作，我只是以 CSS 为例，并同时在两者上使用切换，我总是在它们之间交换。

HTML:

<button id="button-info" class="green">Button info</button>
<button id="button-method" class="red">Button Method</button>
<br /> <br />
<button id="shipping-info">Shipping info</button>
<button id="shipping-method">Shipping Method</button>

jQuery:

var buttons = $("#button-info, #button-method").on("click", function(){   
    $(buttons).toggleClass('red green');
    var buttons_to_toggle = $("#shipping-info, #shipping-method").toggle();
});

CSS:

.red {background-color:red}
.green {background-color:green}
#shipping-info { display:block; }
#shipping-method { display:none; }