如何使用jQuery为Javascript中的两个按钮之间的切换创建有效的代码？

Question

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

范围

当单击是或否时，相反的按钮将获得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功能肉的替代品。

  

修改

     

显然，这也适用于多个按钮。深夜编码也是如此。 ＆GT; _ ＆GT;

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');

});

Answer 2

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

  buttons.on('click', function(e){
    var $this = $(this);
    buttons.removeClass('selected').addClass('disabled');
    $this.addClass('selected').removeClass('disabled');

    switch ($this.attr('id')){
        case 'yes': 
            val = true;
            break;
        case 'no': 
            val = false;
            break;
    }
    //do something with val
  })
}

Answer 3

function bindButtons(){
  $('#buttons button').click(function(e){ 
    var thisObj = $(this);
    $('#buttons').removeClass('selected');
    thisObj.removeClass('disabled').addClass('selected').siblings().addClass('disabled');
    var val = thisObj.attr('id')=='yes' ? true : false;    
    //do something with val
  })
}
bindButtons();

http://jsfiddle.net/Tjngw/6/

Answer 4

我建议在你的html中使用html5 data-属性作为答案和一些jquery toggeling。

的HTML

<div id="buttons">
    <button id="yes" data-answer="true">Yes</button>
    <button id="no" data-answer="false">No</button>
</div>

使用jQuery很容易使用Toggeling：

的Javascript

// Bind events to your buttons
var bindButtons = function(){

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

        e.preventDefault();

        $(this)
            .addClass('selected');
            .siblings()
            .removeClass('selected')
            .addClass('disabled');
    });

};

// Init binding
bindButtons();

// Get your answer
var answer = $('#buttons .selected').data('answer');

演示

Try it on jsbin

Answer 5

你可以做些缩短的事情：

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

为：

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

可能会将第二个if(){更改为else{

除了这样的缩短之外，除非这个代码拖动浏览器（不是这样），否则它没有任何问题。

Answer 6

希望这有点帮助。我通常使用jQuery的.not()和$(this).

$('#buttons button').click(function() {
    $('#buttons button').not($(this)).removeClass('enabled').addClass('disabled');
    $(this).removeClass('disabled').addClass('enabled');

    var selected = $(this).attr('id'); // To use the id, or to use text use:
    var selected = $(this).text();  // No need for ids, grabs the text of element
});

Answer 7

您可以尝试这样的事情：

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

  buttons.on('click', function(e){
    var $this = $(this);
    var el = $this;
    var val = $this.attr('id') === 'yes';
    buttons.removeClass('selected disabled');
    $this.addClass('selected')
      .siblings('button').addClass('disabled');

    //do something with val
  })
}

至少删除if语句。

Answer 8

试试这个：

$("#buttons button").on('click', function(e) {
    $(".selected").removeClass('selected');

    var el;

    if($this.attr('id') == 'yes'){
        val = true;

        el = $("#no");
    } else {
        val = false;

        el = $("#yes");
    }

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