0

ボタンをスイッチとして使用しようとしています。ボタンをクリックすると、valueとidが変わります。valueボタンをもう一度クリックすると、元の状態に戻りますid。

元の値は次のようになります。

value="Show all" id="showall"

この値に変更

value="Standard" id="default"

<script>
    $(function () {
        $("#showall").click(function () {
            $("#showall") //  change the Value text to Standard on the button
            $("#showall") // Change ID value to default on the button
        });
        $("#default").click(function () {
            $("#default") // change value back to the original which is "Show all"
            $("#default") // change ID back to original which is "Showall"
        });
</script>
4

6 に答える 6

1

このボタンが<div class="container"></div>イベントを処理できるタイプの範囲内にあると仮定します（本文から処理することも、ドキュメントから処理することもできますが、それはお勧めできません）。

$(".container").on("click", "#showall, #default", function(){
  var props = this.id === "showall" 
      ? { value:'Standard', id:'default' } 
      : { value:'Show All', id:'showall' };
  $(this).attr( props );
});

デモ： http： //jsbin.com/eravoq/2/edit

于 2012-05-14T14:55:23.160 に答える
0

IDを変更する代わりに、クラストグルを使用する必要があります。

http://jsfiddle.net/JzMnM/

if (that.hasClass('foo')) {
    that.removeClass('foo').addClass('bar').val('bar');
} else {
    that.removeClass('bar').addClass('foo').val('foo');
}
于 2012-05-14T15:10:06.473 に答える
0

なぜボタンのIDを変更するのですか? あなたはそのようなことをすることができます:

  $(function () {
       $("#switchButton").click(function(){
           if($(this).value == "default"){
                $(this).value = "Show all";
                // do other stuff
           }else if($(this).value == "Show all"){
                $(this).value = "default";
                // do other stuff
           }
       });
    });
于 2012-05-14T15:01:08.090 に答える
0 
   $("#showall").on('click', function () {
        $(this).attr({ 'value': 'Standard', 'id': 'default' });
    });

    $("#default").on('click', function () {
        $(this).attr({ 'value': 'Show all', 'id': 'showall' });
    });
于 2012-05-14T14:59:05.250 に答える
0 
$("#showall").on('click', function() {
    this.id = this.id=='showall' ? 'default' : 'showall';
    this.value = this.value=='Standard' ? 'Show All' : 'Standard';
});

フィドル

于 2012-05-14T15:03:20.487 に答える
0

私はあなたが求めているものではないことを知っていますが、あなたの質問に一歩戻ると、あなたが本当に望んでいるのは2つのボタンを切り替えることだと思うので、非常に保守可能で、理解しやすく、直感的で、より多くのことを適切に形成された2つのボタンと表示/非表示を交互に使用します。

<style>
  button#default{
    display: none;
  }
</style>
 ​
<button id="showall" value="Show all">Show all</button>
<button id="default" value="Standard">Standard</button>

<script>
  function toggleButtons(){
    $("button#showall, button#default").toggle();
  }

  $("button#showall, button#default").click( toggleButtons );
</script>

jsFiddle を確認する

于 2012-05-14T15:04:14.520 に答える