3

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

范围

当单击是或否时，对面的按钮将获得一个disabledCSS 类，而单击的按钮将获得一个activeCSS 类。Avar也将与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/

4

8 回答 8

3

这应该可以作为bindButtons功能肉的替代品。

编辑

显然，这也应该与多个按钮一起使用。深夜编码也是如此。> _ >

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

});
于 2013-01-15T12:48:46.237 回答
2

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

html

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

使用 jQuery 很容易切换：

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

演示

在 jsbin 上试试。

于 2013-01-15T13:24:46.417 回答
1 
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
  })
}
于 2013-01-15T12:54:10.423 回答
1 
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/

于 2013-01-15T12:56:22.320 回答
0

尝试这个：

$("#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');
});
于 2013-01-15T13:31:54.290 回答
0

希望这会有所帮助。.not()我通常使用jQuery$(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
});
于 2013-01-15T12:46:41.033 回答
0

你可以做一些事情，比如缩短：

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

至：

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

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

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

于 2013-01-15T12:41:51.977 回答
0

你可以尝试这样的事情：

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 语句。

于 2013-01-15T12:50:16.993 回答