javascript - 如何使用 jQuery 创建用于在 Javascript 中的两个按钮之间切换的高效代码？

Question

我正在寻找一种使用 javascript 和 jQuery 在两个按钮之间高效切换的方法。

范围

当点击 Yes 或 No 时，相对的按钮将获得一个 disabled CSS 类，而被点击的按钮将获得一个 active CSS 类。 var 也将与 true false 值一起保存，稍后将使用该值。

html

<div id="buttons">
  <button id="yes">Yes</button>
  <button id="no">No</button>
</div>

js

function bindButtons(){
  var buttons = $('#buttons button');

  buttons.on('click', function(e){
    var $this = $(this);
    buttons.removeClass('selected');
    if($this.attr('id') == 'yes'){
      var el = $('#no'),
          val = true;
      $this.removeClass('disabled');
      $this.addClass('selected');
      el.addClass('disabled');
    }
    if($this.attr('id') == 'no'){
      var el = $('#yes'),
          val = false;
      $this.removeClass('disabled');
      $this.addClass('selected');
      el.addClass('disabled');
    }
    //do something with val
  })
}
bindButtons();

jsFiddle

http://jsfiddle.net/RobertSheaO/Tjngw/2/

Answer 1

这应该可以替代您的 bindButtons 功能肉。

EDIT

Apparently, this should also work with more than one button. Late night coding as well. >_>

var buttons = $('#buttons button').on('click', function (e) {

    var $this = $(this).removeClass('disabled').addClass('selected'),
        el = buttons.not(this).addClass('disabled'),
        isYes = $this.is('#yes')
        ;

    // do something with isYes

});

jsFiddle

它对我来说是完全可读的，但它可能不适合你，所以如果你愿意，这可能会更好:

var buttons = $('#buttons button').on('click', function (e) {

    var $this = $(this),
        el = buttons.not(this),
        isYes = $this.is('#yes')
        ;

    $this.removeClass('disabled');
    $this.addClass('selected');
    el.addClass('disabled');

});