创建3个具有不同值的Buttons数组，这些值每次使用JavaScript都会一次更改一次

Question

本质上，我试图让3个按钮具有3个不同的值-但一次只显示一个。 每次单击一个按钮，它就会消失，并且以下按钮会显示在相同的按钮位置。 每次单击都会经过3个按钮的循环。

Default Start: [Button 1 - Value A]
Button 1.clicked -> [Button 2 - Value B]
Button 2.clicked -> [Button 3 - Value C]
Button 3.clicked -> [Button 1 - Value A] 

如果有人愿意分享使用JavaScript实现此方法的方法，请多加感谢。

这个想法类似于每次单击更改时的播放和暂停按钮。 我希望在周期中增加第三个要素。

Answer 1

看下面的例子：

 function clickMe(element) { element = $(element); var next = element.attr('data-rel'); //alert(element.attr('data-text')); //show value element.hide(); //hide element $('button.' + next).show(); //show next button } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button class="button-1" data-rel="button-2" data-text="Value 1" onclick="clickMe(this);">Button 1</button> <button style="display:none;" class="button-2" data-rel="button-3" data-text="Value 2" onclick="clickMe(this);">Button 2</button> <button style="display:none;" class="button-3" data-rel="button-1" data-text="Value 3" onclick="clickMe(this);">Button 3</button> 

Answer 2

我认为这很有意义，如果您保留按钮并仅更改其值：

 $(document).ready(function() { var buttons = ["A", "B", "C"]; //All your buttons values here $(".insert_button").append("<input class='Button' type='button' value='A'></input>"); $('.Button').click(function() { var next = buttons[($.inArray($(this).val(), buttons) + 1) % buttons.length]; //get next element in array $(this).val(next); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="insert_button"></div> 

Answer 3

一种更清洁，更简单的方法

的HTML

<div>
    <button class="button button1 active">Button1</button>
    <button class="button button2">Button2</button>
    <button class="button button3">Button3</button>
</div>

CSS
.button{
    display:none;
}
.button.active{
    display:block;
}

Java脚本

$(document).ready(function(){
    $('.button').on('click',function(){
        var buttons = ('.button').length;

        var thisIndex = $('.button').index(this);

        var next = thisIndex < 2 ? thisIndex+1 : 0;
        $('.button.active').removeClass('active');

        $('.button').eq(next).addClass('active');
    });
});

这是一个演示jsfiddle http://jsfiddle.net/ajaaibu/phsrtpyy/