3

javascriptとjQueryを使用して2つのボタンを効率的に切り替える方法を探しています。

範囲

[はい]または[いいえ]をクリックすると、反対側のボタンで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これはあなたの機能肉の代わりとしてOKであるはずです。

編集

どうやら、これは複数のボタンでも機能するはずです。深夜のコーディングも。> _ >

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

答えとjqueryのトゲリングには、htmlのhtml5data-属性を使用することをお勧めします。

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

あなたは短縮のようなことをすることができます：

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

に：

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

そしておそらく2番目if(){をに変更しますelse{

そのような短縮を除けば、このコードがブラウザを下にドラッグしていない限り（そうではありません）、問題はありません。

于 2013-01-15T12:41:51.977 に答える
0

うまくいけば、これは少し役立つでしょう。私は通常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
});
于 2013-01-15T12:46:41.033 に答える
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 に答える
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 に答える