Javascript下一个按钮数组

Question

I am unrehearsed in javascript and was hoping for some help with a next button that links to an id based on the array. Here is the array

var baseline_next=new Array();
baseline_next[0]="#one";      
baseline_next[1]="#two";
baseline_next[2]="#three";
baseline_next[3]="#four";
baseline_next[4]="#five";
baseline_next[5]="#six";
baseline_next[6]="#six2";
baseline_next[7]="#seven";
baseline_next[8]="#eight";
baseline_next[9]="#nine";
baseline_next[10]="#ten";
baseline_next[11]="#eleven";
baseline_next[13]="#thirteen";
baseline_next[14]="#fourteen";
baseline_next[15]="#fifteen";
baseline_next[16]="#sixteen";
baseline_next[17]="#seventeen";
baseline_next[18]="#eighteen";
baseline_next[19]="#nineteen";
baseline_next[20]="#twenty";
baseline_next[21]="#twentyone";
baseline_next[22]="#twentytwo";
baseline_next[22]="#twentythree";

Basically what I need is, when the next button is clicked first ("0" ~ #one) I need the next buttons id to become two, and when clicked again it needs to become #three. I have no idea how to link an array to a button. The reason I need this to happen is because I am using ajax to .load div contents, so the next button doesn't actually submit, it just becomes a new next button. I dont know if it matters, but here is a part of what the button would cause to happen on click.

$('#one').click(function(){
        $("#area").hide("slide", { direction: "left" }, 500);
        $("#area").load("test_it.jsp #area");
        $("#area").show("slide", { direction: "right" }, 500);
        $("#two").show();

        });
$('#two').click(function(){
    if((document.form1.baseline_01[0].checked || document.form1.baseline_01[1].checked| document.form1.baseline_01[2].checked)
    && (document.form1.baseline_02[0].checked || document.form1.baseline_02[1].checked) 
    && (document.form1.baseline_03_native.checked || document.form1.baseline_03_asian.checked|| document.form1.baseline_03_black.checked|| document.form1.baseline_03_pacific.checked|| document.form1.baseline_03_white.checked|| document.form1.baseline_03_other.checked)){
        if(document.form1.baseline_03_other.checked && document.form1.baseline_03_other_text.value==""){
            alert("Please fill in what other race you concider yourself to be.");
            return false;
        }else{
        $("#area").hide("slide", { direction: "left" }, 500);
        $("#area").load("test_it.jsp #area2");
        $("#area").show("slide", { direction: "right" }, 500);
            $("#three").show();
            return true;
        }
    }else{
        alert("Please select an answer for each question.");
        return false;
    }
        });

I must apologize in advanced if my question is hard to follow, I just started coding this year.

Answer 1

I think that you should consider reworking your code a bit to not have this list of IDs and use a single class on all of the elements. It would help to see how your HTML is set up to get the next element based on class as well.

Since you already have this array of doom, though, I guess we'll have to use it. Ideally, you have the same class on each element. Let's say, .number .

$(".number").on('click', function () {
    var nextID = baseline_next.indexOf(this.id) + 1;
});

If you can't use .number , then you can do the same thing except with a list of every ID that needs to be bound .. ouch. In the above function, nextID should be the index of the ID that comes after the clicked element.

By the way, IDs can be numbers, and you could even use data-id that contains the number. That would be easier too.

Answer 2

OK I really need to ask why are you doing this, are you sure that creating more than 20 ID's called like that is the better way to do want you want?

Anyways, first of all, you can create the array in a shorthand way:

var baseline_next= ["#one", "#two", "#four", "#five", "#six", "#six2" ..., "#twentythree";

(btw "#six2"? really?)

then do something like this:

var counter = 0; // start for the first one
$("#button").on('click', function () {
    var id = counter++;
    baseline[id]; // and I don't know what you want to do with this, but here it is!
});

Answer 3

Ancient question. (7 years wowzers). Here is some logic that I used for determining the next item in an array using indexOf . This will also start from the beginning once you reach the end of your array.

        let options = [true,false,null];
        let current = options.indexOf(this.get('order'));
        let next = (current+1 > options.length-1 ? 0 : current+1);
        this.set('order', options[next]);

Answer 4

It can be simplified as follows:

let baseline_next = ["#one", "#two", "#three"];

Don't use a var as it behaves unpredictably.

Add a variable count to change the index of the array.

let count = 0;
let baseline_next = ["#one", "#two", "#three"];
$(baseline_next[count]).click(function() {
    count++;
});

Or

let count = 0;
let baseline_next = ["#one", "#two", "#three"];
$("#one").click(function() {
    $(baseline_next[count]).click();
    count++;
});