1

twiter-bootstrap を使用して、ボタンのテキストを元のテキストに交換しようとしています。

ドキュメントは次のとおりです。

$().button('reset'); 
// Resets button state - swaps text to original text.

$().button(string)
// Resets button state - swaps text to any data defined text state.

参考：http ://twitter.github.com/bootstrap/javascript.html#buttons

これが私のコード(1)で、これがjsfidlle http://jsfiddle.net/D2RLR/2646/の私のデモです

ボタンをクリックしようとすると、期待どおりにテキストが変更されます。次に、もう一度クリックしようとしても、テキストは変更されません。
コードを修正するにはどうすればよいですか?

(1)

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
            // buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​
4

3 に答える 3

3

これは機能しますが、これを達成するためのより良い方法があるかどうかはわかりません。

http://jsfiddle.net/Shmiddty/D2RLR/2651/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.attr('data-default-text', 'hide');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'default' : 'complete');
    });
});

$('body').append(buttonElement);​

ああ、もっと良い方法があります: http://jsfiddle.net/Shmiddty/D2RLR/2655/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'reset' : 'complete');
    });
});

$('body').append(buttonElement);​

</p>

于 2012-10-11T17:23:30.507 に答える
1

次の js コードを試してください。

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
        if ($(this).is(':hidden')) {
            buttonElement.text('show');
        } else {
            buttonElement.text('hide');
        }
    });
});

$('body').append(buttonElement);
于 2012-10-11T17:23:57.667 に答える
0

上記のコードサンプルに基づいています。toggle は、「トグル」する複数の機能を使用することに注意してください。

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
        },
        function() {
           buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​
于 2012-10-11T17:15:24.717 に答える